{"version":3,"sources":["webpack:///./src/midone/views/slider/Main.vue","webpack:///./src/midone/views/slider/Main.vue?2185"],"names":["class","id","data-target","options","alt","src","$f","images","script","render"],"mappings":"2IAEI,gCAEM,OAFDA,MAAM,kCAAgC,CACzC,gCAAmD,MAA/CA,MAAM,+BAA8B,Y,MAErCA,MAAM,gC,GACJA,MAAM,qC,GAEJA,MAAM,e,2aAgBJC,GAAG,qBAAqBD,MAAM,O,GAC5BA,MAAM,W,GACJA,MAAM,Q,EAMP,gCAQM,OARDA,MAAM,aAAW,CACpB,gCAMM,OANDA,MAAM,gDAA8C,CACvD,gCAIK,MAHHA,MAAM,gEACP,W,KAKL,gCAQM,OARDA,MAAM,aAAW,CACpB,gCAMM,OANDA,MAAM,gDAA8C,CACvD,gCAIK,MAHHA,MAAM,gEACP,W,KAKL,gCAQM,OARDA,MAAM,aAAW,CACpB,gCAMM,OANDA,MAAM,gDAA8C,CACvD,gCAIK,MAHHA,MAAM,gEACP,W,KAKL,gCAQM,OARDA,MAAM,aAAW,CACpB,gCAMM,OANDA,MAAM,gDAA8C,CACvD,gCAIK,MAHHA,MAAM,gEACP,W,KAKL,gCAQM,OARDA,MAAM,aAAW,CACpB,gCAMM,OANDA,MAAM,gDAA8C,CACvD,gCAIK,MAHHA,MAAM,gEACP,W,KAKL,gCAQM,OARDA,MAAM,aAAW,CACpB,gCAMM,OANDA,MAAM,gDAA8C,CACvD,gCAIK,MAHHA,MAAM,gEACP,W,MAQNA,MAAM,sB,GAEPE,cAAY,2BACZF,MAAM,4G,+BAE2B,uB,GAE9BA,MAAM,6B,EAEP,gCA+EO,QA9ELA,MAAM,4DAA0D,CAEhE,gCA2EW,gBA3ED,4zG,MAoFjBA,MAAM,oB,+aAgBJC,GAAG,uBAAuBD,MAAM,O,GAC9BA,MAAM,W,GACJA,MAAM,Q,EAgBP,gCAQM,OARDA,MAAM,aAAW,CACpB,gCAMM,OANDA,MAAM,gDAA8C,CACvD,gCAIK,MAHHA,MAAM,gEACP,W,KAKL,gCAQM,OARDA,MAAM,aAAW,CACpB,gCAMM,OANDA,MAAM,gDAA8C,CACvD,gCAIK,MAHHA,MAAM,gEACP,W,KAKL,gCAQM,OARDA,MAAM,aAAW,CACpB,gCAMM,OANDA,MAAM,gDAA8C,CACvD,gCAIK,MAHHA,MAAM,gEACP,W,KAKL,gCAQM,OARDA,MAAM,aAAW,CACpB,gCAMM,OANDA,MAAM,gDAA8C,CACvD,gCAIK,MAHHA,MAAM,gEACP,W,KAKL,gCAQM,OARDA,MAAM,aAAW,CACpB,gCAMM,OANDA,MAAM,gDAA8C,CACvD,gCAIK,MAHHA,MAAM,gEACP,W,KAKL,gCAQM,OARDA,MAAM,aAAW,CACpB,gCAMM,OANDA,MAAM,gDAA8C,CACvD,gCAIK,MAHHA,MAAM,gEACP,W,KAKL,gCAQM,OARDA,MAAM,aAAW,CACpB,gCAMM,OANDA,MAAM,gDAA8C,CACvD,gCAIK,MAHHA,MAAM,gEACP,W,KAKL,gCAQM,OARDA,MAAM,aAAW,CACpB,gCAMM,OANDA,MAAM,gDAA8C,CACvD,gCAIK,MAHHA,MAAM,gEACP,W,KAKL,gCAQM,OARDA,MAAM,aAAW,CACpB,gCAMM,OANDA,MAAM,gDAA8C,CACvD,gCAIK,MAHHA,MAAM,gEACP,W,MAQNA,MAAM,sB,GAEPE,cAAY,6BACZF,MAAM,4G,+BAE2B,uB,GAE9BA,MAAM,6B,EAKP,gCA0HO,QAzHLA,MAAM,4DAA0D,CAEhE,gCAsHW,gBAtHD,+rK,MA+HjBA,MAAM,oB,ibAgBJC,GAAG,oBAAoBD,MAAM,O,GAC3BA,MAAM,W,GACJA,MAAM,a,EAiBP,gCAQM,OARDA,MAAM,aAAW,CACpB,gCAMM,OANDA,MAAM,gDAA8C,CACvD,gCAIK,MAHHA,MAAM,gEACP,W,KAKL,gCAQM,OARDA,MAAM,aAAW,CACpB,gCAMM,OANDA,MAAM,gDAA8C,CACvD,gCAIK,MAHHA,MAAM,gEACP,W,KAKL,gCAQM,OARDA,MAAM,aAAW,CACpB,gCAMM,OANDA,MAAM,gDAA8C,CACvD,gCAIK,MAHHA,MAAM,gEACP,W,KAKL,gCAQM,OARDA,MAAM,aAAW,CACpB,gCAMM,OANDA,MAAM,gDAA8C,CACvD,gCAIK,MAHHA,MAAM,gEACP,W,KAKL,gCAQM,OARDA,MAAM,aAAW,CACpB,gCAMM,OANDA,MAAM,gDAA8C,CACvD,gCAIK,MAHHA,MAAM,gEACP,W,KAKL,gCAQM,OARDA,MAAM,aAAW,CACpB,gCAMM,OANDA,MAAM,gDAA8C,CACvD,gCAIK,MAHHA,MAAM,gEACP,W,KAKL,gCAQM,OARDA,MAAM,aAAW,CACpB,gCAMM,OANDA,MAAM,gDAA8C,CACvD,gCAIK,MAHHA,MAAM,gEACP,W,MAKL,gCAQM,OARDA,MAAM,aAAW,CACpB,gCAMM,OANDA,MAAM,gDAA8C,CACvD,gCAIK,MAHHA,MAAM,gEACP,W,OAQNA,MAAM,sB,IAEPE,cAAY,0BACZF,MAAM,4G,gCAE2B,uB,IAE9BA,MAAM,6B,GAEP,gCAgHO,QA/GLA,MAAM,4DAA0D,CAEhE,gCA4GW,gBA5GD,4uJ,OAqHnBA,MAAM,qC,IAEJA,MAAM,e,6aAgBJC,GAAG,qBAAqBD,MAAM,O,IAC5BA,MAAM,W,IACJA,MAAM,Q,GAcP,gCAQM,OARDA,MAAM,aAAW,CACpB,gCAMM,OANDA,MAAM,gDAA8C,CACvD,gCAIK,MAHHA,MAAM,gEACP,W,MAKL,gCAQM,OARDA,MAAM,aAAW,CACpB,gCAMM,OANDA,MAAM,gDAA8C,CACvD,gCAIK,MAHHA,MAAM,gEACP,W,MAKL,gCAQM,OARDA,MAAM,aAAW,CACpB,gCAMM,OANDA,MAAM,gDAA8C,CACvD,gCAIK,MAHHA,MAAM,gEACP,W,MAKL,gCAQM,OARDA,MAAM,aAAW,CACpB,gCAMM,OANDA,MAAM,gDAA8C,CACvD,gCAIK,MAHHA,MAAM,gEACP,W,MAKL,gCAQM,OARDA,MAAM,aAAW,CACpB,gCAMM,OANDA,MAAM,gDAA8C,CACvD,gCAIK,MAHHA,MAAM,gEACP,W,MAKL,gCAQM,OARDA,MAAM,aAAW,CACpB,gCAMM,OANDA,MAAM,gDAA8C,CACvD,gCAIK,MAHHA,MAAM,gEACP,W,OAQNA,MAAM,sB,IAEPE,cAAY,2BACZF,MAAM,4G,gCAE2B,uB,IAE9BA,MAAM,6B,GAEP,gCAuFO,QAtFLA,MAAM,4DAA0D,CAEhE,gCAmFW,gBAnFD,wnH,OA4FjBA,MAAM,oB,mbAgBJC,GAAG,wBAAwBD,MAAM,O,IAC/BA,MAAM,W,IACJA,MAAM,a,IASFA,MAAM,a,IACJA,MAAM,+C,eAORA,MAAM,a,IACJA,MAAM,+C,eAORA,MAAM,a,IACJA,MAAM,+C,eAUdA,MAAM,sB,IAEPE,cAAY,8BACZF,MAAM,4G,gCAE2B,uB,IAE9BA,MAAM,6B,GAKP,gCAoDO,QAnDLA,MAAM,4DAA0D,CAEhE,gCAgDW,gBAhDD,2oE,kMAn7B5B,gCA6+BM,YA5+BJ,EAGA,gCAw+BM,MAx+BN,EAw+BM,CAv+BJ,gCAqqBM,MArqBN,EAqqBM,CAnqBJ,gCA8KM,MA9KN,EA8KM,CA7KJ,EAeA,gCA6JM,MA7JN,EA6JM,CA5JJ,gCA+DM,MA/DN,EA+DM,CA9DJ,gCA6DM,MA7DN,EA6DM,CA5DJ,yBA2Da,IA1DVG,QAAS,C,cAET,C,8BAED,iBAQM,CARN,EASA,EASA,EASA,EASA,EASA,M,UAYN,gCA2FM,MA3FN,EA2FM,CA1FJ,gCAKS,SALT,EAKS,CADP,yBAAiC,IAAvBH,MAAM,iB,IAElB,gCAmFM,MAnFN,EAmFM,CAlFJ,yBAiFY,IAjFDC,GAAG,0BAA0BD,MAAM,kB,+BAC5C,iBA+EO,CA/EP,M,cAuFV,gCAiQM,MAjQN,EAiQM,CAhQJ,EAeA,gCAgPM,MAhPN,EAgPM,CA/OJ,gCAoGM,MApGN,EAoGM,CAnGJ,gCAkGM,MAlGN,EAkGM,CAjGJ,yBAgGa,IA/FVG,QAAS,C,2EAYT,C,8BAED,iBAQM,CARN,EASA,EASA,EASA,EASA,EASA,EASA,EASA,EASA,M,UAYN,gCAyIM,MAzIN,EAyIM,CAxIJ,gCAKS,SALT,EAKS,CADP,yBAAiC,IAAvBH,MAAM,iB,IAElB,gCAiIM,MAjIN,EAiIM,CAhIJ,yBA+HY,IA9HVC,GAAG,4BACHD,MAAM,kB,+BAEN,iBA0HO,CA1HP,M,cAkIV,gCA4OM,MA5ON,EA4OM,CA3OJ,EAeA,gCA2NM,MA3NN,EA2NM,CA1NJ,gCA4FM,MA5FN,EA4FM,CA3FJ,gCA0FM,MA1FN,EA0FM,CAzFJ,yBAwFa,IAvFVG,QAAS,C,kFAaT,C,8BAED,iBAQM,CARN,EASA,EASA,EASA,EASA,EASA,EASA,EASA,O,UAYN,gCA4HM,MA5HN,GA4HM,CA3HJ,gCAKS,SALT,GAKS,CADP,yBAAiC,IAAvBH,MAAM,iB,KAElB,gCAoHM,MApHN,GAoHM,CAnHJ,yBAkHY,IAlHDC,GAAG,yBAAyBD,MAAM,kB,+BAC3C,iBAgHO,CAhHP,O,gBAwHZ,gCAgUM,MAhUN,GAgUM,CA9TJ,gCA8LM,MA9LN,GA8LM,CA7LJ,GAeA,gCA6KM,MA7KN,GA6KM,CA5KJ,gCAuEM,MAvEN,GAuEM,CAtEJ,gCAqEM,MArEN,GAqEM,CApEJ,yBAmEa,IAlEVG,QAAS,C,uEAUT,C,8BAED,iBAQM,CARN,GASA,GASA,GASA,GASA,GASA,O,UAYN,gCAmGM,MAnGN,GAmGM,CAlGJ,gCAKS,SALT,GAKS,CADP,yBAAiC,IAAvBH,MAAM,iB,KAElB,gCA2FM,MA3FN,GA2FM,CA1FJ,yBAyFY,IAzFDC,GAAG,0BAA0BD,MAAM,kB,+BAC5C,iBAuFO,CAvFP,O,cA+FV,gCA2HM,MA3HN,GA2HM,CA1HJ,GAeA,gCA0GM,MA1GN,GA0GM,CAzGJ,gCAoCM,MApCN,GAoCM,CAnCJ,gCAkCM,MAlCN,GAkCM,CAjCJ,yBAgCa,IA/BVG,QAAS,C,8CAKT,C,8BAED,iBAOM,CAPN,gCAOM,MAPN,GAOM,CANJ,gCAKM,MALN,GAKM,CAJJ,gCAGE,OAFAC,IAAI,sCACHC,IAAK,UAAQ,YAA0B,EAAAC,KAAE,GAAMC,OAAM,M,eAI5D,gCAOM,MAPN,GAOM,CANJ,gCAKM,MALN,GAKM,CAJJ,gCAGE,OAFAH,IAAI,sCACHC,IAAK,UAAQ,YAA0B,EAAAC,KAAE,GAAMC,OAAM,M,eAI5D,gCAOM,MAPN,GAOM,CANJ,gCAKM,MALN,GAKM,CAJJ,gCAGE,OAFAH,IAAI,sCACHC,IAAK,UAAQ,YAA0B,EAAAC,KAAE,GAAMC,OAAM,M,6BAOlE,gCAmEM,MAnEN,GAmEM,CAlEJ,gCAKS,SALT,GAKS,CADP,yBAAiC,IAAvBP,MAAM,iB,KAElB,gCA2DM,MA3DN,GA2DM,CA1DJ,yBAyDY,IAxDVC,GAAG,6BACHD,MAAM,kB,+BAEN,iBAoDO,CApDP,O,oBCh7BlB,MAAMQ,GAAS,GACfA,GAAOC,OAASA,GAED","file":"js/chunk-2d0f0c23.f09a8426.js","sourcesContent":["<template>\n  <div>\n    <div class=\"intro-y flex items-center mt-8\">\n      <h2 class=\"text-lg font-medium mr-auto\">Slider</h2>\n    </div>\n    <div class=\"grid grid-cols-12 gap-6 mt-5\">\n      <div class=\"intro-y col-span-12 lg:col-span-6\">\n        <!-- BEGIN: Single Item -->\n        <div class=\"intro-y box\">\n          <div\n            class=\"flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5\"\n          >\n            <h2 class=\"font-medium text-base mr-auto\">Single Item</h2>\n            <div\n              class=\"w-full sm:w-auto flex items-center sm:ml-auto mt-3 sm:mt-0\"\n            >\n              <div class=\"mr-3\">Show example code</div>\n              <input\n                data-target=\"#single-item-slider\"\n                class=\"show-code input input--switch border\"\n                type=\"checkbox\"\n              />\n            </div>\n          </div>\n          <div id=\"single-item-slider\" class=\"p-5\">\n            <div class=\"preview\">\n              <div class=\"mx-6\">\n                <TinySlider\n                  :options=\"{\n                    controls: true,\n                  }\"\n                >\n                  <div class=\"h-32 px-2\">\n                    <div class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\">\n                      <h3\n                        class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                      >\n                        1\n                      </h3>\n                    </div>\n                  </div>\n                  <div class=\"h-32 px-2\">\n                    <div class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\">\n                      <h3\n                        class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                      >\n                        2\n                      </h3>\n                    </div>\n                  </div>\n                  <div class=\"h-32 px-2\">\n                    <div class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\">\n                      <h3\n                        class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                      >\n                        3\n                      </h3>\n                    </div>\n                  </div>\n                  <div class=\"h-32 px-2\">\n                    <div class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\">\n                      <h3\n                        class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                      >\n                        4\n                      </h3>\n                    </div>\n                  </div>\n                  <div class=\"h-32 px-2\">\n                    <div class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\">\n                      <h3\n                        class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                      >\n                        5\n                      </h3>\n                    </div>\n                  </div>\n                  <div class=\"h-32 px-2\">\n                    <div class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\">\n                      <h3\n                        class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                      >\n                        6\n                      </h3>\n                    </div>\n                  </div>\n                </TinySlider>\n              </div>\n            </div>\n            <div class=\"source-code hidden\">\n              <button\n                data-target=\"#copy-single-item-slider\"\n                class=\"copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300\"\n              >\n                <FileIcon class=\"w-4 h-4 mr-2\" /> Copy example code\n              </button>\n              <div class=\"overflow-y-auto h-64 mt-3\">\n                <Highlight id=\"copy-single-item-slider\" class=\"source-preview\">\n                  <code\n                    class=\"text-xs p-0 rounded-md html pl-5 pt-8 pb-4 -mb-10 -mt-10\"\n                  >\n                    <textarea>\n                      <div class=\"mx-6\">\n                        <TinySlider\n                          :options=\"{\n                            controls: true\n                          }\"\n                        >\n                          <div class=\"h-32 px-2\">\n                            <div\n                              class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\"\n                            >\n                              <h3\n                                class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                              >\n                                1\n                              </h3>\n                            </div>\n                          </div>\n                          <div class=\"h-32 px-2\">\n                            <div\n                              class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\"\n                            >\n                              <h3\n                                class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                              >\n                                2\n                              </h3>\n                            </div>\n                          </div>\n                          <div class=\"h-32 px-2\">\n                            <div\n                              class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\"\n                            >\n                              <h3\n                                class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                              >\n                                3\n                              </h3>\n                            </div>\n                          </div>\n                          <div class=\"h-32 px-2\">\n                            <div\n                              class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\"\n                            >\n                              <h3\n                                class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                              >\n                                4\n                              </h3>\n                            </div>\n                          </div>\n                          <div class=\"h-32 px-2\">\n                            <div\n                              class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\"\n                            >\n                              <h3\n                                class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                              >\n                                5\n                              </h3>\n                            </div>\n                          </div>\n                          <div class=\"h-32 px-2\">\n                            <div\n                              class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\"\n                            >\n                              <h3\n                                class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                              >\n                                6\n                              </h3>\n                            </div>\n                          </div>\n                        </TinySlider>\n                      </div>\n                    </textarea>\n                  </code>\n                </Highlight>\n              </div>\n            </div>\n          </div>\n        </div>\n        <!-- END: Single Item -->\n        <!-- BEGIN: Multiple Item -->\n        <div class=\"intro-y box mt-5\">\n          <div\n            class=\"flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5\"\n          >\n            <h2 class=\"font-medium text-base mr-auto\">Multiple Item</h2>\n            <div\n              class=\"w-full sm:w-auto flex items-center sm:ml-auto mt-3 sm:mt-0\"\n            >\n              <div class=\"mr-3\">Show example code</div>\n              <input\n                data-target=\"#multiple-item-slider\"\n                class=\"show-code input input--switch border\"\n                type=\"checkbox\"\n              />\n            </div>\n          </div>\n          <div id=\"multiple-item-slider\" class=\"p-5\">\n            <div class=\"preview\">\n              <div class=\"mx-6\">\n                <TinySlider\n                  :options=\"{\n                    autoplay: false,\n                    controls: true,\n                    items: 1,\n                    responsive: {\n                      600: {\n                        items: 3,\n                      },\n                      480: {\n                        items: 2,\n                      },\n                    },\n                  }\"\n                >\n                  <div class=\"h-32 px-2\">\n                    <div class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\">\n                      <h3\n                        class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                      >\n                        1\n                      </h3>\n                    </div>\n                  </div>\n                  <div class=\"h-32 px-2\">\n                    <div class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\">\n                      <h3\n                        class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                      >\n                        2\n                      </h3>\n                    </div>\n                  </div>\n                  <div class=\"h-32 px-2\">\n                    <div class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\">\n                      <h3\n                        class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                      >\n                        3\n                      </h3>\n                    </div>\n                  </div>\n                  <div class=\"h-32 px-2\">\n                    <div class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\">\n                      <h3\n                        class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                      >\n                        4\n                      </h3>\n                    </div>\n                  </div>\n                  <div class=\"h-32 px-2\">\n                    <div class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\">\n                      <h3\n                        class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                      >\n                        5\n                      </h3>\n                    </div>\n                  </div>\n                  <div class=\"h-32 px-2\">\n                    <div class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\">\n                      <h3\n                        class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                      >\n                        6\n                      </h3>\n                    </div>\n                  </div>\n                  <div class=\"h-32 px-2\">\n                    <div class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\">\n                      <h3\n                        class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                      >\n                        7\n                      </h3>\n                    </div>\n                  </div>\n                  <div class=\"h-32 px-2\">\n                    <div class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\">\n                      <h3\n                        class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                      >\n                        8\n                      </h3>\n                    </div>\n                  </div>\n                  <div class=\"h-32 px-2\">\n                    <div class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\">\n                      <h3\n                        class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                      >\n                        9\n                      </h3>\n                    </div>\n                  </div>\n                </TinySlider>\n              </div>\n            </div>\n            <div class=\"source-code hidden\">\n              <button\n                data-target=\"#copy-multiple-item-slider\"\n                class=\"copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300\"\n              >\n                <FileIcon class=\"w-4 h-4 mr-2\" /> Copy example code\n              </button>\n              <div class=\"overflow-y-auto h-64 mt-3\">\n                <Highlight\n                  id=\"copy-multiple-item-slider\"\n                  class=\"source-preview\"\n                >\n                  <code\n                    class=\"text-xs p-0 rounded-md html pl-5 pt-8 pb-4 -mb-10 -mt-10\"\n                  >\n                    <textarea>\n                      <div class=\"mx-6\">\n                        <TinySlider\n                          :options=\"{\n                            autoplay: false,\n                            controls: true,\n                            items: 1,\n                            responsive: {\n                              600: {\n                                items: 3\n                              },\n                              480: {\n                                items: 2\n                              }\n                            }\n                          }\"\n                        >\n                          <div class=\"h-32 px-2\">\n                            <div\n                              class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\"\n                            >\n                              <h3\n                                class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                              >\n                                1\n                              </h3>\n                            </div>\n                          </div>\n                          <div class=\"h-32 px-2\">\n                            <div\n                              class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\"\n                            >\n                              <h3\n                                class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                              >\n                                2\n                              </h3>\n                            </div>\n                          </div>\n                          <div class=\"h-32 px-2\">\n                            <div\n                              class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\"\n                            >\n                              <h3\n                                class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                              >\n                                3\n                              </h3>\n                            </div>\n                          </div>\n                          <div class=\"h-32 px-2\">\n                            <div\n                              class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\"\n                            >\n                              <h3\n                                class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                              >\n                                4\n                              </h3>\n                            </div>\n                          </div>\n                          <div class=\"h-32 px-2\">\n                            <div\n                              class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\"\n                            >\n                              <h3\n                                class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                              >\n                                5\n                              </h3>\n                            </div>\n                          </div>\n                          <div class=\"h-32 px-2\">\n                            <div\n                              class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\"\n                            >\n                              <h3\n                                class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                              >\n                                6\n                              </h3>\n                            </div>\n                          </div>\n                          <div class=\"h-32 px-2\">\n                            <div\n                              class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\"\n                            >\n                              <h3\n                                class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                              >\n                                7\n                              </h3>\n                            </div>\n                          </div>\n                          <div class=\"h-32 px-2\">\n                            <div\n                              class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\"\n                            >\n                              <h3\n                                class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                              >\n                                8\n                              </h3>\n                            </div>\n                          </div>\n                          <div class=\"h-32 px-2\">\n                            <div\n                              class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\"\n                            >\n                              <h3\n                                class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                              >\n                                9\n                              </h3>\n                            </div>\n                          </div>\n                        </TinySlider>\n                      </div>\n                    </textarea>\n                  </code>\n                </Highlight>\n              </div>\n            </div>\n          </div>\n        </div>\n        <!-- END: Multiple Item -->\n        <!-- BEGIN: Responsive Display -->\n        <div class=\"intro-y box mt-5\">\n          <div\n            class=\"flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5\"\n          >\n            <h2 class=\"font-medium text-base mr-auto\">Responsive Display</h2>\n            <div\n              class=\"w-full sm:w-auto flex items-center sm:ml-auto mt-3 sm:mt-0\"\n            >\n              <div class=\"mr-3\">Show example code</div>\n              <input\n                data-target=\"#responsive-slider\"\n                class=\"show-code input input--switch border\"\n                type=\"checkbox\"\n              />\n            </div>\n          </div>\n          <div id=\"responsive-slider\" class=\"p-5\">\n            <div class=\"preview\">\n              <div class=\"mx-6 mb-8\">\n                <TinySlider\n                  :options=\"{\n                    autoplay: false,\n                    controls: true,\n                    items: 1,\n                    nav: true,\n                    responsive: {\n                      600: {\n                        items: 3,\n                      },\n                      480: {\n                        items: 2,\n                      },\n                    },\n                  }\"\n                >\n                  <div class=\"h-32 px-2\">\n                    <div class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\">\n                      <h3\n                        class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                      >\n                        1\n                      </h3>\n                    </div>\n                  </div>\n                  <div class=\"h-32 px-2\">\n                    <div class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\">\n                      <h3\n                        class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                      >\n                        2\n                      </h3>\n                    </div>\n                  </div>\n                  <div class=\"h-32 px-2\">\n                    <div class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\">\n                      <h3\n                        class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                      >\n                        3\n                      </h3>\n                    </div>\n                  </div>\n                  <div class=\"h-32 px-2\">\n                    <div class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\">\n                      <h3\n                        class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                      >\n                        4\n                      </h3>\n                    </div>\n                  </div>\n                  <div class=\"h-32 px-2\">\n                    <div class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\">\n                      <h3\n                        class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                      >\n                        5\n                      </h3>\n                    </div>\n                  </div>\n                  <div class=\"h-32 px-2\">\n                    <div class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\">\n                      <h3\n                        class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                      >\n                        6\n                      </h3>\n                    </div>\n                  </div>\n                  <div class=\"h-32 px-2\">\n                    <div class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\">\n                      <h3\n                        class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                      >\n                        7\n                      </h3>\n                    </div>\n                  </div>\n                  <div class=\"h-32 px-2\">\n                    <div class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\">\n                      <h3\n                        class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                      >\n                        8\n                      </h3>\n                    </div>\n                  </div>\n                </TinySlider>\n              </div>\n            </div>\n            <div class=\"source-code hidden\">\n              <button\n                data-target=\"#copy-responsive-slider\"\n                class=\"copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300\"\n              >\n                <FileIcon class=\"w-4 h-4 mr-2\" /> Copy example code\n              </button>\n              <div class=\"overflow-y-auto h-64 mt-3\">\n                <Highlight id=\"copy-responsive-slider\" class=\"source-preview\">\n                  <code\n                    class=\"text-xs p-0 rounded-md html pl-5 pt-8 pb-4 -mb-10 -mt-10\"\n                  >\n                    <textarea>\n                      <div class=\"mx-6 mb-8\">\n                        <TinySlider\n                          :options=\"{\n                            autoplay: false,\n                            controls: true,\n                            items: 1,\n                            nav: true,\n                            responsive: {\n                              600: {\n                                items: 3\n                              },\n                              480: {\n                                items: 2\n                              }\n                            }\n                          }\"\n                        >\n                          <div class=\"h-32 px-2\">\n                            <div\n                              class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\"\n                            >\n                              <h3\n                                class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                              >\n                                1\n                              </h3>\n                            </div>\n                          </div>\n                          <div class=\"h-32 px-2\">\n                            <div\n                              class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\"\n                            >\n                              <h3\n                                class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                              >\n                                2\n                              </h3>\n                            </div>\n                          </div>\n                          <div class=\"h-32 px-2\">\n                            <div\n                              class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\"\n                            >\n                              <h3\n                                class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                              >\n                                3\n                              </h3>\n                            </div>\n                          </div>\n                          <div class=\"h-32 px-2\">\n                            <div\n                              class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\"\n                            >\n                              <h3\n                                class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                              >\n                                4\n                              </h3>\n                            </div>\n                          </div>\n                          <div class=\"h-32 px-2\">\n                            <div\n                              class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\"\n                            >\n                              <h3\n                                class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                              >\n                                5\n                              </h3>\n                            </div>\n                          </div>\n                          <div class=\"h-32 px-2\">\n                            <div\n                              class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\"\n                            >\n                              <h3\n                                class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                              >\n                                6\n                              </h3>\n                            </div>\n                          </div>\n                          <div class=\"h-32 px-2\">\n                            <div\n                              class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\"\n                            >\n                              <h3\n                                class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                              >\n                                7\n                              </h3>\n                            </div>\n                          </div>\n                          <div class=\"h-32 px-2\">\n                            <div\n                              class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\"\n                            >\n                              <h3\n                                class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                              >\n                                8\n                              </h3>\n                            </div>\n                          </div>\n                        </TinySlider>\n                      </div>\n                    </textarea>\n                  </code>\n                </Highlight>\n              </div>\n            </div>\n          </div>\n        </div>\n        <!-- END: Responsive Display -->\n      </div>\n      <div class=\"intro-y col-span-12 lg:col-span-6\">\n        <!-- BEGIN: Center Mode -->\n        <div class=\"intro-y box\">\n          <div\n            class=\"flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5\"\n          >\n            <h2 class=\"font-medium text-base mr-auto\">Center Mode</h2>\n            <div\n              class=\"w-full sm:w-auto flex items-center sm:ml-auto mt-3 sm:mt-0\"\n            >\n              <div class=\"mr-3\">Show example code</div>\n              <input\n                data-target=\"#center-mode-slider\"\n                class=\"show-code input input--switch border\"\n                type=\"checkbox\"\n              />\n            </div>\n          </div>\n          <div id=\"center-mode-slider\" class=\"p-5\">\n            <div class=\"preview\">\n              <div class=\"mx-6\">\n                <TinySlider\n                  :options=\"{\n                    autoplay: false,\n                    controls: true,\n                    center: true,\n                    items: 1,\n                    responsive: {\n                      600: {\n                        items: 2,\n                      },\n                    },\n                  }\"\n                >\n                  <div class=\"h-32 px-2\">\n                    <div class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\">\n                      <h3\n                        class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                      >\n                        1\n                      </h3>\n                    </div>\n                  </div>\n                  <div class=\"h-32 px-2\">\n                    <div class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\">\n                      <h3\n                        class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                      >\n                        2\n                      </h3>\n                    </div>\n                  </div>\n                  <div class=\"h-32 px-2\">\n                    <div class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\">\n                      <h3\n                        class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                      >\n                        3\n                      </h3>\n                    </div>\n                  </div>\n                  <div class=\"h-32 px-2\">\n                    <div class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\">\n                      <h3\n                        class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                      >\n                        4\n                      </h3>\n                    </div>\n                  </div>\n                  <div class=\"h-32 px-2\">\n                    <div class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\">\n                      <h3\n                        class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                      >\n                        5\n                      </h3>\n                    </div>\n                  </div>\n                  <div class=\"h-32 px-2\">\n                    <div class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\">\n                      <h3\n                        class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                      >\n                        6\n                      </h3>\n                    </div>\n                  </div>\n                </TinySlider>\n              </div>\n            </div>\n            <div class=\"source-code hidden\">\n              <button\n                data-target=\"#copy-center-mode-slider\"\n                class=\"copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300\"\n              >\n                <FileIcon class=\"w-4 h-4 mr-2\" /> Copy example code\n              </button>\n              <div class=\"overflow-y-auto h-64 mt-3\">\n                <Highlight id=\"copy-center-mode-slider\" class=\"source-preview\">\n                  <code\n                    class=\"text-xs p-0 rounded-md html pl-5 pt-8 pb-4 -mb-10 -mt-10\"\n                  >\n                    <textarea>\n                      <div class=\"mx-6\">\n                        <TinySlider\n                          :options=\"{\n                            autoplay: false,\n                            controls: true,\n                            center: true,\n                            items: 1,\n                            responsive: {\n                              600: {\n                                items: 2\n                              }\n                            }\n                          }\"\n                        >\n                          <div class=\"h-32 px-2\">\n                            <div\n                              class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\"\n                            >\n                              <h3\n                                class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                              >\n                                1\n                              </h3>\n                            </div>\n                          </div>\n                          <div class=\"h-32 px-2\">\n                            <div\n                              class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\"\n                            >\n                              <h3\n                                class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                              >\n                                2\n                              </h3>\n                            </div>\n                          </div>\n                          <div class=\"h-32 px-2\">\n                            <div\n                              class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\"\n                            >\n                              <h3\n                                class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                              >\n                                3\n                              </h3>\n                            </div>\n                          </div>\n                          <div class=\"h-32 px-2\">\n                            <div\n                              class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\"\n                            >\n                              <h3\n                                class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                              >\n                                4\n                              </h3>\n                            </div>\n                          </div>\n                          <div class=\"h-32 px-2\">\n                            <div\n                              class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\"\n                            >\n                              <h3\n                                class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                              >\n                                5\n                              </h3>\n                            </div>\n                          </div>\n                          <div class=\"h-32 px-2\">\n                            <div\n                              class=\"h-full bg-gray-200 dark:bg-dark-1 rounded-md\"\n                            >\n                              <h3\n                                class=\"h-full font-medium flex items-center justify-center text-2xl\"\n                              >\n                                6\n                              </h3>\n                            </div>\n                          </div>\n                        </TinySlider>\n                      </div>\n                    </textarea>\n                  </code>\n                </Highlight>\n              </div>\n            </div>\n          </div>\n        </div>\n        <!-- END: Center Mode -->\n        <!-- BEGIN: Fade Animation -->\n        <div class=\"intro-y box mt-5\">\n          <div\n            class=\"flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5\"\n          >\n            <h2 class=\"font-medium text-base mr-auto\">Fade Animation</h2>\n            <div\n              class=\"w-full sm:w-auto flex items-center sm:ml-auto mt-3 sm:mt-0\"\n            >\n              <div class=\"mr-3\">Show example code</div>\n              <input\n                data-target=\"#fade-animation-slider\"\n                class=\"show-code input input--switch border\"\n                type=\"checkbox\"\n              />\n            </div>\n          </div>\n          <div id=\"fade-animation-slider\" class=\"p-5\">\n            <div class=\"preview\">\n              <div class=\"mx-6 mb-8\">\n                <TinySlider\n                  :options=\"{\n                    mode: 'gallery',\n                    controls: true,\n                    nav: true,\n                    speed: 500,\n                  }\"\n                >\n                  <div class=\"h-64 px-2\">\n                    <div class=\"h-full image-fit rounded-md overflow-hidden\">\n                      <img\n                        alt=\"Midone Tailwind HTML Admin Template\"\n                        :src=\"require(`@/midone/assets/images/${$f()[0].images[0]}`)\"\n                      />\n                    </div>\n                  </div>\n                  <div class=\"h-64 px-2\">\n                    <div class=\"h-full image-fit rounded-md overflow-hidden\">\n                      <img\n                        alt=\"Midone Tailwind HTML Admin Template\"\n                        :src=\"require(`@/midone/assets/images/${$f()[1].images[1]}`)\"\n                      />\n                    </div>\n                  </div>\n                  <div class=\"h-64 px-2\">\n                    <div class=\"h-full image-fit rounded-md overflow-hidden\">\n                      <img\n                        alt=\"Midone Tailwind HTML Admin Template\"\n                        :src=\"require(`@/midone/assets/images/${$f()[2].images[2]}`)\"\n                      />\n                    </div>\n                  </div>\n                </TinySlider>\n              </div>\n            </div>\n            <div class=\"source-code hidden\">\n              <button\n                data-target=\"#copy-fade-animation-slider\"\n                class=\"copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300\"\n              >\n                <FileIcon class=\"w-4 h-4 mr-2\" /> Copy example code\n              </button>\n              <div class=\"overflow-y-auto h-64 mt-3\">\n                <Highlight\n                  id=\"copy-fade-animation-slider\"\n                  class=\"source-preview\"\n                >\n                  <code\n                    class=\"text-xs p-0 rounded-md html pl-5 pt-8 pb-4 -mb-10 -mt-10\"\n                  >\n                    <textarea>\n                      <div class=\"mx-6 mb-8\">\n                        <TinySlider\n                          :options=\"{\n                            mode: 'gallery',\n                            controls: true,\n                            nav: true,\n                            speed: 500\n                          }\"\n                        >\n                          <div class=\"h-64 px-2\">\n                            <div\n                              class=\"h-full image-fit rounded-md overflow-hidden\"\n                            >\n                              <img\n                                alt=\"Midone Tailwind HTML Admin Template\"\n                                :src=\"\n                                  require(`@/midone/assets/images/${$f()[0].images[0]}`)\n                                \"\n                              />\n                            </div>\n                          </div>\n                          <div class=\"h-64 px-2\">\n                            <div\n                              class=\"h-full image-fit rounded-md overflow-hidden\"\n                            >\n                              <img\n                                alt=\"Midone Tailwind HTML Admin Template\"\n                                :src=\"\n                                  require(`@/midone/assets/images/${$f()[1].images[1]}`)\n                                \"\n                              />\n                            </div>\n                          </div>\n                          <div class=\"h-64 px-2\">\n                            <div\n                              class=\"h-full image-fit rounded-md overflow-hidden\"\n                            >\n                              <img\n                                alt=\"Midone Tailwind HTML Admin Template\"\n                                :src=\"\n                                  require(`@/midone/assets/images/${$f()[2].images[2]}`)\n                                \"\n                              />\n                            </div>\n                          </div>\n                        </TinySlider>\n                      </div>\n                    </textarea>\n                  </code>\n                </Highlight>\n              </div>\n            </div>\n          </div>\n        </div>\n        <!-- END: Fade Animation -->\n      </div>\n    </div>\n  </div>\n</template>\n","import { render } from \"./Main.vue?vue&type=template&id=a524d8f8\"\nconst script = {}\nscript.render = render\n\nexport default script"],"sourceRoot":""}