carousel.deda723a.js 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338
  1. import{_ as A}from"./carousel1.01799c1e.js";import{c as M,_ as w,I as _}from"./icon-code.6d7a3662.js";import{g as L,n as F,S as b,N as z,P as I,a as k}from"./pagination.min.b7ce10ba.js";import{d as D,b as R,u as q,e as K,c as h,a as t,f as i,j as r,g as j,W as u,w as l,l as E,o as a,F as S,i as C,K as y}from"./index.c685e846.js";import{I as W}from"./icon-bell.2e21c889.js";function B({swiper:e,extendParams:f,on:m,emit:o}){let n;e.autoplay={running:!1,paused:!1},f({autoplay:{enabled:!1,delay:3e3,waitForTransition:!0,disableOnInteraction:!0,stopOnLastSlide:!1,reverseDirection:!1,pauseOnMouseEnter:!1}});function v(){if(!e.size){e.autoplay.running=!1,e.autoplay.paused=!1;return}const d=e.slides.eq(e.activeIndex);let x=e.params.autoplay.delay;d.attr("data-swiper-autoplay")&&(x=d.attr("data-swiper-autoplay")||e.params.autoplay.delay),clearTimeout(n),n=F(()=>{let g;e.params.autoplay.reverseDirection?e.params.loop?(e.loopFix(),g=e.slidePrev(e.params.speed,!0,!0),o("autoplay")):e.isBeginning?e.params.autoplay.stopOnLastSlide?s():(g=e.slideTo(e.slides.length-1,e.params.speed,!0,!0),o("autoplay")):(g=e.slidePrev(e.params.speed,!0,!0),o("autoplay")):e.params.loop?(e.loopFix(),g=e.slideNext(e.params.speed,!0,!0),o("autoplay")):e.isEnd?e.params.autoplay.stopOnLastSlide?s():(g=e.slideTo(0,e.params.speed,!0,!0),o("autoplay")):(g=e.slideNext(e.params.speed,!0,!0),o("autoplay")),(e.params.cssMode&&e.autoplay.running||g===!1)&&v()},x)}function c(){return typeof n<"u"||e.autoplay.running?!1:(e.autoplay.running=!0,o("autoplayStart"),v(),!0)}function s(){return!e.autoplay.running||typeof n>"u"?!1:(n&&(clearTimeout(n),n=void 0),e.autoplay.running=!1,o("autoplayStop"),!0)}function p(d){!e.autoplay.running||e.autoplay.paused||(n&&clearTimeout(n),e.autoplay.paused=!0,d===0||!e.params.autoplay.waitForTransition?(e.autoplay.paused=!1,v()):["transitionend","webkitTransitionEnd"].forEach(x=>{e.$wrapperEl[0].addEventListener(x,$)}))}function P(){const d=L();d.visibilityState==="hidden"&&e.autoplay.running&&p(),d.visibilityState==="visible"&&e.autoplay.paused&&(v(),e.autoplay.paused=!1)}function $(d){!e||e.destroyed||!e.$wrapperEl||d.target===e.$wrapperEl[0]&&(["transitionend","webkitTransitionEnd"].forEach(x=>{e.$wrapperEl[0].removeEventListener(x,$)}),e.autoplay.paused=!1,e.autoplay.running?v():s())}function N(){e.params.autoplay.disableOnInteraction?s():(o("autoplayPause"),p()),["transitionend","webkitTransitionEnd"].forEach(d=>{e.$wrapperEl[0].removeEventListener(d,$)})}function T(){e.params.autoplay.disableOnInteraction||(e.autoplay.paused=!1,o("autoplayResume"),v())}function V(){e.params.autoplay.pauseOnMouseEnter&&(e.$el.on("mouseenter",N),e.$el.on("mouseleave",T))}function O(){e.$el.off("mouseenter",N),e.$el.off("mouseleave",T)}m("init",()=>{e.params.autoplay.enabled&&(c(),L().addEventListener("visibilitychange",P),V())}),m("beforeTransitionStart",(d,x,g)=>{e.autoplay.running&&(g||!e.params.autoplay.disableOnInteraction?e.autoplay.pause(x):s())}),m("sliderFirstMove",()=>{e.autoplay.running&&(e.params.autoplay.disableOnInteraction?s():p())}),m("touchEnd",()=>{e.params.cssMode&&e.autoplay.paused&&!e.params.autoplay.disableOnInteraction&&v()}),m("destroy",()=>{O(),e.autoplay.running&&s(),L().removeEventListener("visibilitychange",P)}),Object.assign(e.autoplay,{pause:p,run:v,start:c,stop:s})}const G="/assets/images/carousel2.jpeg",H="/assets/images/carousel3.jpeg",J=t("ul",{class:"flex space-x-2 rtl:space-x-reverse"},[t("li",null,[t("a",{href:"javascript:;",class:"text-primary hover:underline"},"Components")]),t("li",{class:"before:content-['/'] ltr:before:mr-2 rtl:before:ml-2"},[t("span",null,"Carousel")])],-1),Q={class:"pt-5 space-y-8"},U={class:"panel p-3 flex items-center text-primary overflow-x-auto whitespace-nowrap"},X={class:"ring-2 ring-primary/30 rounded-full bg-primary text-white p-1.5 ltr:mr-3 rtl:ml-3"},Y=t("span",{class:"ltr:mr-3 rtl:ml-3"},"Documentation: ",-1),Z=t("a",{href:"https://www.npmjs.com/package/swiper",target:"_blank",class:"block hover:underline"},"https://www.npmjs.com/package/swiper",-1),ee={class:"grid grid-cols-1 lg:grid-cols-2 gap-6"},te={class:"panel"},re={class:"flex items-center justify-between mb-5"},se=t("h5",{class:"font-semibold text-lg dark:text-white-light"},"Basic",-1),ae={class:"flex items-center"},ie=["src"],le={href:"javascript:;",class:"swiper-button-prev-ex1 grid place-content-center ltr:left-2 rtl:right-2 p-1 transition text-primary hover:text-white border border-primary hover:border-primary hover:bg-primary rounded-full absolute z-[999] top-1/2 -translate-y-1/2"},oe={href:"javascript:;",class:"swiper-button-next-ex1 grid place-content-center ltr:right-2 rtl:left-2 p-1 transition text-primary hover:text-white border border-primary hover:border-primary hover:bg-primary rounded-full absolute z-[999] top-1/2 -translate-y-1/2"},ne=t("pre",null,`<!-- basic -->
  2. <swiper
  3. :modules="[Navigation, Pagination]"
  4. :navigation="{ nextEl: '.swiper-button-next-ex1', prevEl: '.swiper-button-prev-ex1' }"
  5. :pagination="{ clickable: true }"
  6. class="max-w-3xl mx-auto mb-5"
  7. id="slider1"
  8. >
  9. <template v-for="(item, i) in items" :key="i">
  10. <swiper-slide>
  11. <img :src="\`/assets/images/\${item}\`" class="w-full max-h-80 object-cover" alt="" />
  12. </swiper-slide>
  13. </template>
  14. <a
  15. href="javascript:;"
  16. class="
  17. swiper-button-prev-ex1
  18. grid
  19. place-content-center
  20. ltr:left-2
  21. rtl:right-2
  22. p-1
  23. transition
  24. text-primary
  25. hover:text-white
  26. border border-primary
  27. hover:border-primary hover:bg-primary
  28. rounded-full
  29. absolute
  30. z-[999]
  31. top-1/2
  32. -translate-y-1/2
  33. "
  34. >
  35. <svg> ... </svg>
  36. </a>
  37. <a
  38. href="javascript:;"
  39. class="
  40. swiper-button-next-ex1
  41. grid
  42. place-content-center
  43. ltr:right-2
  44. rtl:left-2
  45. p-1
  46. transition
  47. text-primary
  48. hover:text-white
  49. border border-primary
  50. hover:border-primary hover:bg-primary
  51. rounded-full
  52. absolute
  53. z-[999]
  54. top-1/2
  55. -translate-y-1/2
  56. "
  57. >
  58. <svg> ... </svg>
  59. </a>
  60. </swiper>
  61. <!-- script -->
  62. <script lang="ts" setup>
  63. import { ref } from 'vue';
  64. import { Swiper, SwiperSlide } from 'swiper/vue';
  65. import { Navigation, Pagination, Autoplay } from 'swiper';
  66. import 'swiper/css';
  67. import 'swiper/css/navigation';
  68. import 'swiper/css/pagination';
  69. const items = ref(['carousel1.jpeg', 'carousel2.jpeg', 'carousel3.jpeg']);
  70. <\/script>
  71. `,-1),pe={class:"panel"},de={class:"flex items-center justify-between mb-5"},ue=t("h5",{class:"font-semibold text-lg dark:text-white-light"},"Autopaly",-1),ce={class:"flex items-center"},me=["src"],fe=t("div",{class:"absolute z-[999] text-white top-1/4 ltr:left-12 rtl:right-12"},[t("div",{class:"sm:text-3xl text-base font-bold"},"This is blog Image"),t("div",{class:"sm:mt-5 mt-1 w-4/5 text-base sm:block hidden font-medium"}," Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard. "),t("button",{type:"button",class:"mt-4 btn btn-primary"},"Learn more")],-1),ve={href:"javascript:;",class:"swiper-button-prev-ex2 grid place-content-center ltr:left-2 rtl:right-2 p-1 transition text-primary hover:text-white border border-primary hover:border-primary hover:bg-primary rounded-full absolute z-[999] top-1/2 -translate-y-1/2"},ge={href:"javascript:;",class:"swiper-button-next-ex2 grid place-content-center ltr:right-2 rtl:left-2 p-1 transition text-primary hover:text-white border border-primary hover:border-primary hover:bg-primary rounded-full absolute z-[999] top-1/2 -translate-y-1/2"},xe=t("pre",null,`<!-- autopaly -->
  72. <swiper
  73. :modules="[Navigation, Autoplay]"
  74. :navigation="{ nextEl: '.swiper-button-next-ex2', prevEl: '.swiper-button-prev-ex2' }"
  75. :autoplay="{ delay: 2000 }"
  76. class="max-w-3xl mx-auto mb-5"
  77. id="slider2"
  78. >
  79. <template v-for="(item, i) in items" :key="i">
  80. <swiper-slide>
  81. <img :src="\`/assets/images/\${item}\`" class="w-full max-h-80 object-cover" alt="" />
  82. <div class="absolute z-[999] text-white top-1/4 ltr:left-12 rtl:right-12">
  83. <div class="sm:text-3xl text-base font-bold">This is blog Image</div>
  84. <div class="sm:mt-5 mt-1 w-4/5 text-base sm:block hidden font-medium">
  85. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
  86. </div>
  87. <button type="button" class="mt-4 btn btn-primary">Learn more</button>
  88. </div>
  89. </swiper-slide>
  90. </template>
  91. <a
  92. href="javascript:;"
  93. class="
  94. swiper-button-prev-ex2
  95. grid
  96. place-content-center
  97. ltr:left-2
  98. rtl:right-2
  99. p-1
  100. transition
  101. text-primary
  102. hover:text-white
  103. border border-primary
  104. hover:border-primary hover:bg-primary
  105. rounded-full
  106. absolute
  107. z-[999]
  108. top-1/2
  109. -translate-y-1/2
  110. "
  111. >
  112. <svg> ... </svg>
  113. </a>
  114. <a
  115. href="javascript:;"
  116. class="
  117. swiper-button-next-ex2
  118. grid
  119. place-content-center
  120. ltr:right-2
  121. rtl:left-2
  122. p-1
  123. transition
  124. text-primary
  125. hover:text-white
  126. border border-primary
  127. hover:border-primary hover:bg-primary
  128. rounded-full
  129. absolute
  130. z-[999]
  131. top-1/2
  132. -translate-y-1/2
  133. "
  134. >
  135. <svg> ... </svg>
  136. </a>
  137. </swiper>
  138. <!-- script -->
  139. <script lang="ts" setup>
  140. import { ref } from 'vue';
  141. import { Swiper, SwiperSlide } from 'swiper/vue';
  142. import { Navigation, Pagination, Autoplay } from 'swiper';
  143. import 'swiper/css';
  144. import 'swiper/css/navigation';
  145. import 'swiper/css/pagination';
  146. const items = ref(['carousel1.jpeg', 'carousel2.jpeg', 'carousel3.jpeg']);
  147. <\/script>
  148. `,-1),be={class:"panel"},ye={class:"flex items-center justify-between mb-5"},he=t("h5",{class:"font-semibold text-lg dark:text-white-light"},"Vertical",-1),we={class:"flex items-center"},_e=["src"],ke=t("div",{class:"absolute z-[999] text-white top-1/2 left-1/2 w-full -translate-x-1/2 text-center"},[t("div",{class:"sm:text-xl text-base font-medium"},"Lorem Ipsum is simply dummy text of the printing.")],-1),je=t("pre",null,`<!-- vertical -->
  149. <swiper :modules="[Pagination, Autoplay]" :direction="'vertical'" :pagination="{ clickable: true }" :autoplay="{ delay: 2000 }" class="max-w-3xl mx-auto mb-5" id="slider3">
  150. <template v-for="(item, i) in items" :key="i">
  151. <swiper-slide>
  152. <img :src="\`/assets/images/\${item}\`" class="w-full" alt="" />
  153. <div class="absolute z-[999] text-white top-1/2 left-1/2 w-full -translate-x-1/2 text-center">
  154. <div class="sm:text-xl text-base font-medium">Lorem Ipsum is simply dummy text of the printing.</div>
  155. </div>
  156. </swiper-slide>
  157. </template>
  158. </swiper>
  159. <!-- script -->
  160. <script lang="ts" setup>
  161. import { ref } from 'vue';
  162. import { Swiper, SwiperSlide } from 'swiper/vue';
  163. import { Navigation, Pagination, Autoplay } from 'swiper';
  164. import 'swiper/css';
  165. import 'swiper/css/navigation';
  166. import 'swiper/css/pagination';
  167. const items = ref(['carousel1.jpeg', 'carousel2.jpeg', 'carousel3.jpeg']);
  168. <\/script>
  169. `,-1),Ee={class:"panel"},Se={class:"flex items-center justify-between mb-5"},Ce=t("h5",{class:"font-semibold text-lg dark:text-white-light"},"Loop",-1),ze={class:"flex items-center"},Ie=t("img",{src:A,class:"w-full",alt:""},null,-1),$e=t("div",{class:"absolute z-[999] text-white bottom-8 left-1/2 w-full -translate-x-1/2 text-center sm:px-0 px-11"},[t("div",{class:"text-3xl font-bold"},"Slide 1"),t("div",{class:"mb-4 sm:text-base font-medium"},"Lorem Ipsum is simply dummy text of the printing.")],-1),Le=t("img",{src:G,class:"w-full",alt:""},null,-1),Pe=t("div",{class:"absolute z-[999] text-white bottom-8 left-1/2 w-full -translate-x-1/2 text-center sm:px-0 px-11"},[t("div",{class:"text-3xl font-bold"},"Slide 2"),t("div",{class:"mb-4 sm:text-base font-medium"},"Lorem Ipsum is simply dummy text of the printing.")],-1),Ne=t("img",{src:H,class:"w-full",alt:""},null,-1),Te=t("div",{class:"absolute z-[999] text-white bottom-8 left-1/2 w-full -translate-x-1/2 text-center sm:px-0 px-11"},[t("div",{class:"text-3xl font-bold"},"Slide 3"),t("div",{class:"mb-4 sm:text-base font-medium"},"Lorem Ipsum is simply dummy text of the printing.")],-1),Be={href:"javascript:;",class:"swiper-button-prev-ex4 grid place-content-center ltr:left-2 rtl:right-2 p-1 transition text-primary hover:text-white border border-primary hover:border-primary hover:bg-primary rounded-full absolute z-[999] top-1/2 -translate-y-1/2"},Ve={href:"javascript:;",class:"swiper-button-next-ex4 grid place-content-center ltr:right-2 rtl:left-2 p-1 transition text-primary hover:text-white border border-primary hover:border-primary hover:bg-primary rounded-full absolute z-[999] top-1/2 -translate-y-1/2"},Oe=t("pre",null,`<!-- loop -->
  170. <swiper
  171. :modules="[Navigation, Pagination]"
  172. slidesPerView="auto"
  173. :spaceBetween="30"
  174. :loop="true"
  175. :navigation="{ nextEl: '.swiper-button-next-ex4', prevEl: '.swiper-button-prev-ex4' }"
  176. :pagination="{ clickable: true, type: 'fraction' }"
  177. class="max-w-3xl mx-auto mb-5"
  178. id="slider4"
  179. >
  180. <swiper-slide>
  181. <img src="/assets/images/carousel1.jpeg" class="w-full" alt="" />
  182. <div class="absolute z-[999] text-white bottom-8 left-1/2 w-full -translate-x-1/2 text-center sm:px-0 px-11">
  183. <div class="text-3xl font-bold">Slide 1</div>
  184. <div class="mb-4 sm:text-base font-medium">Lorem Ipsum is simply dummy text of the printing.</div>
  185. </div>
  186. </swiper-slide>
  187. <swiper-slide>
  188. <img src="/assets/images/carousel2.jpeg" class="w-full" alt="" />
  189. <div class="absolute z-[999] text-white bottom-8 left-1/2 w-full -translate-x-1/2 text-center sm:px-0 px-11">
  190. <div class="text-3xl font-bold">Slide 2</div>
  191. <div class="mb-4 sm:text-base font-medium">Lorem Ipsum is simply dummy text of the printing.</div>
  192. </div>
  193. </swiper-slide>
  194. <swiper-slide>
  195. <img src="/assets/images/carousel3.jpeg" class="w-full" alt="" />
  196. <div class="absolute z-[999] text-white bottom-8 left-1/2 w-full -translate-x-1/2 text-center sm:px-0 px-11">
  197. <div class="text-3xl font-bold">Slide 3</div>
  198. <div class="mb-4 sm:text-base font-medium">Lorem Ipsum is simply dummy text of the printing.</div>
  199. </div>
  200. </swiper-slide>
  201. <a
  202. href="javascript:;"
  203. class="
  204. swiper-button-prev-ex4
  205. grid
  206. place-content-center
  207. ltr:left-2
  208. rtl:right-2
  209. p-1
  210. transition
  211. text-primary
  212. hover:text-white
  213. border border-primary
  214. hover:border-primary hover:bg-primary
  215. rounded-full
  216. absolute
  217. z-[999]
  218. top-1/2
  219. -translate-y-1/2
  220. "
  221. >
  222. <svg> ... </svg>
  223. </a>
  224. <a
  225. href="javascript:;"
  226. class="
  227. swiper-button-next-ex4
  228. grid
  229. place-content-center
  230. ltr:right-2
  231. rtl:left-2
  232. p-1
  233. transition
  234. text-primary
  235. hover:text-white
  236. border border-primary
  237. hover:border-primary hover:bg-primary
  238. rounded-full
  239. absolute
  240. z-[999]
  241. top-1/2
  242. -translate-y-1/2
  243. "
  244. >
  245. <svg> ... </svg>
  246. </a>
  247. </swiper>
  248. <!-- script -->
  249. <script lang="ts" setup>
  250. import { ref } from 'vue';
  251. import { Swiper, SwiperSlide } from 'swiper/vue';
  252. import { Navigation, Pagination, Autoplay } from 'swiper';
  253. import 'swiper/css';
  254. import 'swiper/css/navigation';
  255. import 'swiper/css/pagination';
  256. const items = ref(['carousel1.jpeg', 'carousel2.jpeg', 'carousel3.jpeg']);
  257. <\/script>
  258. `,-1),Ae={class:"panel lg:col-span-2"},Me={class:"flex items-center justify-between mb-5"},Fe=t("h5",{class:"font-semibold text-lg dark:text-white-light"},"Multiple Slides",-1),De={class:"flex items-center"},Re=["src"],qe=["src"],Ke={href:"javascript:;",class:"swiper-button-prev-ex5 grid place-content-center ltr:left-2 rtl:right-2 p-1 transition text-primary hover:text-white border border-primary hover:border-primary hover:bg-primary rounded-full absolute z-[999] top-[44%] -translate-y-1/2"},We={href:"javascript:;",class:"swiper-button-next-ex5 grid place-content-center ltr:right-2 rtl:left-2 p-1 transition text-primary hover:text-white border border-primary hover:border-primary hover:bg-primary rounded-full absolute z-[999] top-[44%] -translate-y-1/2"},Ge=t("pre",null,`<!-- multiple -->
  259. <swiper
  260. :modules="[Navigation, Pagination]"
  261. :navigation="{ nextEl: '.swiper-button-next-ex5', prevEl: '.swiper-button-prev-ex5' }"
  262. :pagination="{ clickable: true }"
  263. :breakpoints="{ 1024: { slidesPerView: 3, spaceBetween: 30 }, 768: { slidesPerView: 2, spaceBetween: 40 }, 320: { slidesPerView: 1, spaceBetween: 20 } }"
  264. id="slider5"
  265. >
  266. <template v-for="(item, i) in items" :key="i">
  267. <swiper-slide>
  268. <img :src="\`/assets/images/\${item}\`" class="w-full" alt="" />
  269. </swiper-slide>
  270. </template>
  271. <template v-for="(item, i) in items" :key="i">
  272. <swiper-slide>
  273. <img :src="\`/assets/images/\${item}\`" class="w-full" alt="" />
  274. </swiper-slide>
  275. </template>
  276. <a
  277. href="javascript:;"
  278. class="
  279. swiper-button-prev-ex5
  280. grid
  281. place-content-center
  282. ltr:left-2
  283. rtl:right-2
  284. p-1
  285. transition
  286. text-primary
  287. hover:text-white
  288. border border-primary
  289. hover:border-primary hover:bg-primary
  290. rounded-full
  291. absolute
  292. z-[999]
  293. top-[44%]
  294. -translate-y-1/2
  295. "
  296. >
  297. <svg> ... </svg>
  298. </a>
  299. <a
  300. href="javascript:;"
  301. class="
  302. swiper-button-next-ex5
  303. grid
  304. place-content-center
  305. ltr:right-2
  306. rtl:left-2
  307. p-1
  308. transition
  309. text-primary
  310. hover:text-white
  311. border border-primary
  312. hover:border-primary hover:bg-primary
  313. rounded-full
  314. absolute
  315. z-[999]
  316. top-[44%]
  317. -translate-y-1/2
  318. "
  319. >
  320. <svg> ... </svg>
  321. </a>
  322. </swiper>
  323. <!-- script -->
  324. <script lang="ts" setup>
  325. import { ref } from 'vue';
  326. import { Swiper, SwiperSlide } from 'swiper/vue';
  327. import { Navigation, Pagination, Autoplay } from 'swiper';
  328. import 'swiper/css';
  329. import 'swiper/css/navigation';
  330. import 'swiper/css/pagination';
  331. const items = ref(['carousel1.jpeg', 'carousel2.jpeg', 'carousel3.jpeg']);
  332. <\/script>
  333. `,-1),Ye=D({__name:"carousel",setup(e){const f=R();q({title:"Carousel"});const{codeArr:m,toggleCode:o}=M(),n=K(["carousel1.jpeg","carousel2.jpeg","carousel3.jpeg"]);return(v,c)=>(a(),h("div",null,[J,t("div",Q,[t("div",U,[t("div",X,[i(W)]),Y,Z]),t("div",ee,[t("div",te,[t("div",re,[se,t("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:c[0]||(c[0]=s=>r(o)("code1"))},[t("span",ae,[i(_,{class:"me-2"}),j(" Code ")])])]),(a(),u(r(k),{modules:[r(z),r(I)],navigation:{nextEl:".swiper-button-next-ex1",prevEl:".swiper-button-prev-ex1"},pagination:{clickable:!0},class:"max-w-3xl mx-auto mb-5",id:"slider1",dir:r(f).rtlClass,key:r(f).rtlClass==="rtl"?"true":"false"},{default:l(()=>[(a(!0),h(S,null,C(n.value,(s,p)=>(a(),u(r(b),{key:p},{default:l(()=>[t("img",{src:`/assets/images/${s}`,class:"w-full max-h-80 object-cover",alt:""},null,8,ie)]),_:2},1024))),128)),t("a",le,[i(y,{class:"w-5 h-5 rtl:-rotate-90 rotate-90"})]),t("a",oe,[i(y,{class:"w-5 h-5 rtl:rotate-90 -rotate-90"})])]),_:1},8,["modules","navigation","dir"])),r(m).includes("code1")?(a(),u(w,{key:0},{default:l(()=>[ne]),_:1})):E("",!0)]),t("div",pe,[t("div",de,[ue,t("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:c[1]||(c[1]=s=>r(o)("code2"))},[t("span",ce,[i(_,{class:"me-2"}),j(" Code ")])])]),(a(),u(r(k),{modules:[r(z),r(B)],navigation:{nextEl:".swiper-button-next-ex2",prevEl:".swiper-button-prev-ex2"},autoplay:{delay:2e3},class:"max-w-3xl mx-auto mb-5",id:"slider2",dir:r(f).rtlClass,key:r(f).rtlClass==="rtl"?"true":"false"},{default:l(()=>[(a(!0),h(S,null,C(n.value,(s,p)=>(a(),u(r(b),{key:p},{default:l(()=>[t("img",{src:`/assets/images/${s}`,class:"w-full max-h-80 object-cover",alt:""},null,8,me),fe]),_:2},1024))),128)),t("a",ve,[i(y,{class:"w-5 h-5 rtl:-rotate-90 rotate-90"})]),t("a",ge,[i(y,{class:"w-5 h-5 rtl:rotate-90 -rotate-90"})])]),_:1},8,["modules","navigation","dir"])),r(m).includes("code2")?(a(),u(w,{key:0},{default:l(()=>[xe]),_:1})):E("",!0)]),t("div",be,[t("div",ye,[he,t("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:c[2]||(c[2]=s=>r(o)("code3"))},[t("span",we,[i(_,{class:"me-2"}),j(" Code ")])])]),i(r(k),{modules:[r(I),r(B)],direction:"vertical",pagination:{clickable:!0},autoplay:{delay:2e3},class:"max-w-3xl mx-auto mb-5",id:"slider3"},{default:l(()=>[(a(!0),h(S,null,C(n.value,(s,p)=>(a(),u(r(b),{key:p},{default:l(()=>[t("img",{src:`/assets/images/${s}`,class:"w-full",alt:""},null,8,_e),ke]),_:2},1024))),128))]),_:1},8,["modules"]),r(m).includes("code3")?(a(),u(w,{key:0},{default:l(()=>[je]),_:1})):E("",!0)]),t("div",Ee,[t("div",Se,[Ce,t("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:c[3]||(c[3]=s=>r(o)("code4"))},[t("span",ze,[i(_,{class:"me-2"}),j(" Code ")])])]),(a(),u(r(k),{modules:[r(z),r(I)],slidesPerView:"auto",spaceBetween:30,loop:!0,navigation:{nextEl:".swiper-button-next-ex4",prevEl:".swiper-button-prev-ex4"},pagination:{clickable:!0,type:"fraction"},class:"max-w-3xl mx-auto mb-5",id:"slider4",dir:r(f).rtlClass,key:r(f).rtlClass==="rtl"?"true":"false"},{default:l(()=>[i(r(b),null,{default:l(()=>[Ie,$e]),_:1}),i(r(b),null,{default:l(()=>[Le,Pe]),_:1}),i(r(b),null,{default:l(()=>[Ne,Te]),_:1}),t("a",Be,[i(y,{class:"w-5 h-5 rtl:-rotate-90 rotate-90"})]),t("a",Ve,[i(y,{class:"w-5 h-5 rtl:rotate-90 -rotate-90"})])]),_:1},8,["modules","navigation","dir"])),r(m).includes("code4")?(a(),u(w,{key:0},{default:l(()=>[Oe]),_:1})):E("",!0)]),t("div",Ae,[t("div",Me,[Fe,t("a",{class:"font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600",href:"javascript:;",onClick:c[4]||(c[4]=s=>r(o)("code5"))},[t("span",De,[i(_,{class:"me-2"}),j(" Code ")])])]),(a(),u(r(k),{modules:[r(z),r(I)],navigation:{nextEl:".swiper-button-next-ex5",prevEl:".swiper-button-prev-ex5"},pagination:{clickable:!0},breakpoints:{1024:{slidesPerView:3,spaceBetween:30},768:{slidesPerView:2,spaceBetween:40},320:{slidesPerView:1,spaceBetween:20}},id:"slider5",dir:r(f).rtlClass,key:r(f).rtlClass==="rtl"?"true":"false"},{default:l(()=>[(a(!0),h(S,null,C(n.value,(s,p)=>(a(),u(r(b),{key:p},{default:l(()=>[t("img",{src:`/assets/images/${s}`,class:"w-full",alt:""},null,8,Re)]),_:2},1024))),128)),(a(!0),h(S,null,C(n.value,(s,p)=>(a(),u(r(b),{key:p},{default:l(()=>[t("img",{src:`/assets/images/${s}`,class:"w-full",alt:""},null,8,qe)]),_:2},1024))),128)),t("a",Ke,[i(y,{class:"w-5 h-5 rtl:-rotate-90 rotate-90"})]),t("a",We,[i(y,{class:"w-5 h-5 rtl:rotate-90 -rotate-90"})])]),_:1},8,["modules","navigation","dir"])),r(m).includes("code5")?(a(),u(w,{key:0},{default:l(()=>[Ge]),_:1})):E("",!0)])])])]))}});export{Ye as default};