1import{r as L,o as s,c as n,d as u,F as w,h as m,v as Q,m as e,b as r,e as t,t as x,b2 as y,a3 as k,aa as R,f as oe}from"./index-BJiotQ1y.js";import{r as g}from"./swiper-element-bundle-zj0lrkik.js";import{V as b}from"./VImg-CEdg-vTA.js";import{_ as h}from"./_plugin-vue_export-helper-DlAUqK2U.js";import{V as q}from"./VCardText-Ds77CzhY.js";import{V as H}from"./VCard-ImMJge73.js";import{_ as le}from"./AppCardCode-CcXt1CXD.js";import{V as we}from"./VRow-BaWP5n9q.js";import{V as d}from"./VCol-Bwtue8I5.js";import"./VAvatar-Bj_eSgFO.js";import"./vue3-perfect-scrollbar-C2zm10Dz.js";import"./VDivider-niEB_qmK.js";/* empty css */const me={class:"swiper-virtual"},ce=["slides"],de={class:"text-secondary"},ge={class:"d-flex justify-center gap-4 flex-wrap"},be={__name:"DemoSwiperVirtualSlides",setup(c){g();const l=Array.from({length:500},(f,a)=>`Slides ${a+1}`),o=L(null),i=L(1),p=L(500),j=f=>{var a;(a=o.value)==null||a.swiper.slideTo(f-1)},A=()=>{var f;(f=o.value)==null||f.swiper.prependSlide([`<swiper-slide>Slide ${--i.value} </swiper-slide>`,`<swiper-slide>Slide ${--i.value} </swiper-slide>`])},U=()=>{var f;(f=o.value)==null||f.swiper.appendSlide([`<swiper-slide>Slide ${++p.value} </swiper-slide>`])};return(f,a)=>(s(),n("section",me,[u("swiper-container",{ref_key:"swiperEl",ref:o,virtual:"true",slides:e(l),navigation:"true","slides-per-view":"5","space-between":"50","free-mode":"true","events-prefix":"swiper-",breakpoints:{1024:{slidesPerView:4,spaceBetween:40},768:{slidesPerView:3,spaceBetween:30},640:{slidesPerView:2,spaceBetween:20},320:{slidesPerView:1,spaceBetween:10}}},[(s(!0),n(w,null,m(e(l),(v,T)=>(s(),n("swiper-slide",{key:T},[u("div",de,Q(v),1)]))),128))],8,ce),u("div",ge,[r(k,{variant:"outlined",color:"primary",onClick:y(A,["prevent"])},{default:t(()=>a[3]||(a[3]=[x(" Prepend 2 Slides ")])),_:1}),r(k,{variant:"outlined",color:"primary",onClick:a[0]||(a[0]=y(v=>j(1),["prevent"]))},{default:t(()=>a[4]||(a[4]=[x(" Slide 1 ")])),_:1}),r(k,{variant:"outlined",color:"primary",onClick:a[1]||(a[1]=y(v=>j(250),["prevent"]))},{default:t(()=>a[5]||(a[5]=[x(" Slide 250 ")])),_:1}),r(k,{variant:"outlined",color:"primary",onClick:a[2]||(a[2]=y(v=>j(500),["prevent"]))},{default:t(()=>a[6]||(a[6]=[x(" Slide 500 ")])),_:1}),r(k,{variant:"outlined",color:"primary",onClick:y(U,["prevent"])},{default:t(()=>a[7]||(a[7]=[x(" Append Slide ")])),_:1})])]))}},C="/assets/banner-31-D6mS0gQn.jpg",B="/assets/banner-32-B8kg_gZc.jpg",z="/assets/banner-33-DfQ0Urdo.jpg",D="/assets/banner-34-CMWn1p69.jpg",G="/assets/banner-35-avrf_yoA.jpg",K="/assets/banner-36-BiLQv0qP.jpg",Z="/assets/banner-37-CxyHDUrj.jpg",J="/assets/5-CFPERer_.jpg",$="/assets/banner-39-D9mpewKd.jpg",ue={"pagination-clickable":"true","slides-per-view":"5","space-between":"50","events-prefix":"swiper-",breakpoints:{1024:{slidesPerView:4,spaceBetween:40},768:{slidesPerView:3,spaceBetween:30},640:{slidesPerView:2,spaceBetween:20},320:{slidesPerView:1,spaceBetween:10}}},fe={__name:"DemoSwiperResponsiveBreakpoints",setup(c){return g(),(l,o)=>(s(),n("swiper-container",ue,[(s(!0),n(w,null,m([e(C),e(B),e(z),e(D),e(G),e(K),e(Z),e(J),e($)],i=>(s(),n("swiper-slide",{key:i},[r(b,{src:i},null,8,["src"])]))),128))]))}},P="/assets/banner-20-D60huBoA.jpg",E="/assets/banner-4-EPycabrm.jpg",X="/assets/banner-5-DVgdLDIC.jpg",_="/assets/banner-7-C3Ec249A.jpg",N="/assets/banner-8-CS7lrdd8.jpg",F="/assets/banner-9-CN54Uf8b.jpg",ve={"pagination-clickable":"true",autoplay:"true",navigation:"true","events-prefix":"swiper-"},_e={__name:"DemoSwiperLazyLoading",setup(c){return g(),(l,o)=>(s(),n("swiper-container",ve,[(s(!0),n(w,null,m([e(E),e(X),e(F),e(_),e(N),e(P)],i=>(s(),n("swiper-slide",{key:i,lazy:"true"},[r(b,{src:i,cover:"",loading:"lazy"},null,8,["src"])]))),128))]))}},S="/assets/banner-11-ClWmypCi.jpg",V="/assets/6-C2cDgitj.jpg",I="/assets/banner-13-Cforbb5S.jpg",W="/assets/banner-15-DVoX7is_.jpg",O="/assets/banner-16-BBt3y7wv.jpg",je={class:"mySwiper","thumbs-swiper":".mySwiper2",loop:"true","space-between":"10",navigation:"true","centered-slides":"true","events-prefix":"swiper-"},xe={class:"mySwiper2",loop:"true","free-mode":"true","events-prefix":"swiper-","slides-per-view":"4"},ye={__name:"DemoSwiperGallery",setup(c){return g(),(l,o)=>(s(),n(w,null,[u("swiper-container",je,[(s(!0),n(w,null,m([e(S),e(V),e(I),e(W),e(O),e(S),e(V),e(I)],i=>(s(),n("swiper-slide",{key:i},[r(b,{src:i,cover:""},null,8,["src"])]))),128))]),u("swiper-container",xe,[(s(!0),n(w,null,m([e(S),e(V),e(I),e(W),e(O),e(S),e(V),e(I)],i=>(s(),n("swiper-slide",{key:i},[r(b,{src:i,cover:""},null,8,["src"])]))),128))])],64))}},ke=h(ye,[["__scopeId","data-v-43655b19"]]),Se="/assets/banner-10-C2w4rcW8.jpg",Ve={pagination:"true",navigation:"true",autoplay:"true","centered-slides":"true","events-prefix":"swiper-"},Ie={__name:"DemoSwiperAutoplay",setup(c){return g(),(l,o)=>(s(),n("swiper-container",Ve,[(s(!0),n(w,null,m([e(_),e(N),e(F),e(Se),e(S),e(P)],i=>(s(),n("swiper-slide",{key:i},[r(b,{src:i,cover:""},null,8,["src"])]))),128))]))}},he={pagination:"true",effect:"coverflow","grab-cursor":"true","centered-slides":"true","slides-per-view":"auto","coverflow-effect-rotate":"50","coverflow-effect-stretch":"0","coverflow-effect-depth":"100","coverflow-effect-modifier":"1","coverflow-effect-slide-shadows":"true","events-prefix":"swiper-"},Be={__name:"DemoSwiperCoverflowEffect",setup(c){return g(),(l,o)=>(s(),n("swiper-container",he,[(s(!0),n(w,null,m([e(C),e(B),e(z),e(D),e(G),e(K),e(Z),e(J),e($)],i=>(s(),n("swiper-slide",{key:i},[r(b,{src:i},null,8,["src"])]))),128))]))}},Pe=h(Be,[["__scopeId","data-v-7a12df17"]]),$e="/assets/banner-21-BbDBzY5j.jpg",Ce="/assets/banner-23-eu_41WqH.jpg",ze="/assets/banner-24-BNOF4zrU.jpg",De={pagination:"true","centered-slides":"true",effect:"cube","grab-cursor":"true","cube-effect-shadow":"true","cube-effect-slide-shadows":"true","cube-effect-shadow-scale":"0.94","events-prefix":"swiper-"},Ge={__name:"DemoSwiperCubeEffect",setup(c){return g(),(l,o)=>(s(),n("swiper-container",De,[(s(!0),n(w,null,m([e($e),e(B),e(Ce),e(ze)],i=>(s(),n("swiper-slide",{key:i},[r(b,{src:i},null,8,["src"])]))),128))]))}},Ee=h(Ge,[["__scopeId","data-v-afdf8d88"]]),Ne="/assets/banner-17-vuA5wUeU.jpg",Ae="/assets/banner-18-rnuWLp8J.jpg",Ue="/assets/banner-19-DKrHObKZ.jpg",Te={"space-between":"30",pagination:"true",navigation:"true",effect:"fade","events-prefix":"swiper-"},Le={__name:"DemoSwiperFade",setup(c){return g(),(l,o)=>(s(),n("swiper-container",Te,[(s(!0),n(w,null,m([e(P),e(Ue),e(Ae),e(Ne),e(O)],i=>(s(),n("swiper-slide",{key:i},[r(b,{src:i},null,8,["src"])]))),128))]))}},Oe={"centered-slides":"true","space-between":"30","slides-per-view":"1","events-prefix":"swiper-",breakpoints:{992:{slidesPerView:4,spaceBetween:30},780:{slidesPerView:3,spaceBetween:30},460:{slidesPerView:2,spaceBetween:20}}},Qe={class:"d-flex align-center gap-x-3"},Fe={class:"font-weight-medium"},We={__name:"DemoSwiperCenteredSlidesOption2",setup(c){return g(),(l,o)=>(s(),n("swiper-container",Oe,[(s(),n(w,null,m([{icon:"tabler-brand-github",text:"Getting Started"},{icon:"tabler-brand-facebook",text:"Pricing & Plans"},{icon:"tabler-brand-twitter",text:"Sales Question"},{icon:"tabler-brand-instagram",text:"Usage Guidelines"},{icon:"tabler-brand-gitlab",text:"General Guide"}],({icon:i,text:p})=>u("swiper-slide",{key:p},[r(H,{class:"bg-default"},{default:t(()=>[r(q,null,{default:t(()=>[u("div",Qe,[r(R,{icon:i,size:"28"},null,8,["icon"]),u("span",Fe,Q(p),1)])]),_:2},1024)]),_:2},1024)])),64))]))}},Me=h(We,[["__scopeId","data-v-6550c208"]]),Re={class:"swiper-centered-slide"},qe={navigation:"true","centered-slides":"true","space-between":"30","slides-per-view":"1","events-prefix":"swiper-",injectStyles:[` 2 .swiper-button-next, .swiper-button-prev{ 3 background: rgb(var(--v-theme-primary)) !important; 4 color: #fff !important; 5 padding-inline: 0.45rem !important; 6 padding-block: 0.45rem !important; 7 inline-size: 1rem !important; 8 block-size: 1rem !important; 9 border-radius: 50% 10 } 11 `],breakpoints:{992:{slidesPerView:4,spaceBetween:30},780:{slidesPerView:3,spaceBetween:30},460:{slidesPerView:2,spaceBetween:20}}},He={class:"d-flex flex-column align-center gap-y-3"},Ke={class:"text-high-emphasis"},Ze={__name:"DemoSwiperCenteredSlidesOption1",setup(c){return g(),(l,o)=>(s(),n("div",Re,[u("swiper-container",qe,[(s(),n(w,null,m([{icon:"tabler-brand-github",text:"Getting Started"},{icon:"tabler-brand-facebook",text:"Pricing & Plans"},{icon:"tabler-brand-twitter",text:"Sales Question"},{icon:"tabler-brand-instagram",text:"Usage Guidelines"},{icon:"tabler-brand-gitlab",text:"General Guide"}],({icon:i,text:p})=>u("swiper-slide",{key:p},[r(H,null,{default:t(()=>[r(q,null,{default:t(()=>[u("div",He,[r(R,{icon:i,size:"28"},null,8,["icon"]),u("span",Ke,Q(p),1)])]),_:2},1024)]),_:2},1024)])),64))])]))}},Je=h(Ze,[["__scopeId","data-v-8665d65d"]]),M="/assets/banner-26-Co29d348.jpg",Xe="/assets/banner-28-BavDZX16.jpg",Ye="/assets/banner-29-Bw5q4Gpe.jpg",er="/assets/banner-30-BcnSNmsG.jpg",rr={"slides-per-view":"4","grid-fill":"rows","space-between":"30","grid-rows":"2","pagination-clickable":"true","events-prefix":"swiper-"},ir={__name:"DemoSwiperGrid",setup(c){return g(),(l,o)=>(s(),n("swiper-container",rr,[(s(!0),n(w,null,m([e(M),e($),e(Xe),e(Ye),e(er),e(C),e(B),e(z),e(D),e(G),e(M),e($)],i=>(s(),n("swiper-slide",{key:i},[r(b,{src:i},null,8,["src"])]))),128))]))}},sr={pagination:"true","slides-per-view":"3","space-between":"25","events-prefix":"swiper-"},nr={__name:"DemoSwiperMultipleSlidesPerView",setup(c){return g(),(l,o)=>(s(),n("swiper-container",sr,[(s(!0),n(w,null,m([e(C),e(B),e(z),e(D),e(G)],i=>(s(),n("swiper-slide",{key:i},[r(b,{src:i},null,8,["src"])]))),128))]))}},tr={navigation:"true","pagination-type":"progressbar","events-prefix":"swiper-"},pr={__name:"DemoSwiperProgress",setup(c){return g(),(l,o)=>(s(),n("swiper-container",tr,[(s(!0),n(w,null,m([e(N),e(_),e(P),e(E),e(X)],i=>(s(),n("swiper-slide",{key:i},[r(b,{src:i},null,8,["src"])]))),128))]))}},ar={pagination:"true","events-prefix":"swiper-"},or={__name:"DemoSwiperPagination",setup(c){return g(),(l,o)=>(s(),n("swiper-container",ar,[(s(!0),n(w,null,m([e(V),e(F),e(N),e(_),e(P)],i=>(s(),n("swiper-slide",{key:i},[r(b,{src:i},null,8,["src"])]))),128))]))}},lr="/assets/banner-14-bNfFS-GU.jpg",Y="/assets/banner-2-SWMk04gr.jpg",wr="/assets/banner-3-S5UpPGOJ.jpg",mr={navigation:"true","events-prefix":"swiper-"},cr={__name:"DemoSwiperNavigation",setup(c){return g(),(l,o)=>(s(),n("swiper-container",mr,[(s(!0),n(w,null,m([e(_),e(E),e(lr),e(wr),e(Y)],i=>(s(),n("swiper-slide",{key:i},[r(b,{src:i},null,8,["src"])]))),128))]))}},dr="/assets/banner-1-rgqr7rAW.jpg",gr={"events-prefix":"swiper-"},br={__name:"DemoSwiperBasic",setup(c){return g(),(l,o)=>(s(),n("swiper-container",gr,[(s(!0),n(w,null,m([e(dr),e(Y),e(E),e(_),e(I)],i=>(s(),n("swiper-slide",{key:i},[r(b,{src:i},null,8,["src"])]))),128))]))}},ur={ts:`<script setup lang="ts"> 12import { register } from 'swiper/element/bundle' 13import swiper10 from '@images/banner/banner-10.jpg' 14import swiper11 from '@images/banner/banner-11.jpg' 15import swiper20 from '@images/banner/banner-20.jpg' 16import swiper7 from '@images/banner/banner-7.jpg' 17import swiper8 from '@images/banner/banner-8.jpg' 18import swiper9 from '@images/banner/banner-9.jpg' 19 20register() 21<\/script> 22 23<template>
24 <swiper-container 25 pagination="true" 26 navigation="true" 27 autoplay="true" 28 centered-slides="true" 29 events-prefix="swiper-" 30 > 31 <swiper-slide 32 v-for="swiperImg in 33 [ 34 swiper7, 35 swiper8, 36 swiper9, 37 swiper10, 38 swiper11, 39 swiper20, 40 ]" 41 :key="swiperImg" 42 > 43 <VImg 44 :src="swiperImg" 45 cover 46 /> 47 </swiper-slide> 48 </swiper-container> 49</template> 50`,js:`<script setup> 51import { register } from 'swiper/element/bundle' 52import swiper10 from '@images/banner/banner-10.jpg' 53import swiper11 from '@images/banner/banner-11.jpg' 54import swiper20 from '@images/banner/banner-20.jpg' 55import swiper7 from '@images/banner/banner-7.jpg' 56import swiper8 from '@images/banner/banner-8.jpg' 57import swiper9 from '@images/banner/banner-9.jpg' 58 59register() 60<\/script> 61 62<template> 63 <swiper-container 64 pagination="true" 65 navigation="true" 66 autoplay="true" 67 centered-slides="true" 68 events-prefix="swiper-" 69 > 70 <swiper-slide 71 v-for="swiperImg in 72 [ 73 swiper7, 74 swiper8, 75 swiper9, 76 swiper10, 77 swiper11, 78 swiper20, 79 ]" 80 :key="swiperImg" 81 > 82 <VImg 83 :src="swiperImg" 84 cover 85 /> 86 </swiper-slide> 87 </swiper-container> 88</template> 89`},fr={ts:`<script setup lang="ts"> 90import { register } from 'swiper/element/bundle' 91 92import swiper1 from '@images/banner/banner-1.jpg' 93import swiper13 from '@images/banner/banner-13.jpg' 94import swiper2 from '@images/banner/banner-2.jpg' 95import swiper4 from '@images/banner/banner-4.jpg' 96import swiper7 from '@images/banner/banner-7.jpg' 97 98register() 99<\/script> 100 101<template> 102 <swiper-container events-prefix="swiper-"> 103 <swiper-slide 104 v-for="swiperImg in [ 105 swiper1, 106 swiper2, 107 swiper4, 108 swiper7, 109 swiper13, 110 ]" 111 :key="swiperImg" 112 > 113 <VImg :src="swiperImg" /> 114 </swiper-slide> 115 </swiper-container> 116</template> 117`,js:`<script setup> 118import { register } from 'swiper/element/bundle' 119import swiper1 from '@images/banner/banner-1.jpg' 120import swiper13 from '@images/banner/banner-13.jpg' 121import swiper2 from '@images/banner/banner-2.jpg' 122import swiper4 from '@images/banner/banner-4.jpg' 123import swiper7 from '@images/banner/banner-7.jpg' 124 125register() 126<\/script> 127 128<template> 129 <swiper-container events-prefix="swiper-"> 130 <swiper-slide 131 v-for="swiperImg in [ 132 swiper1, 133 swiper2, 134 swiper4, 135 swiper7, 136 swiper13, 137 ]" 138 :key="swiperImg" 139 > 140 <VImg :src="swiperImg" /> 141 </swiper-slide> 142 </swiper-container> 143</template> 144`},vr={ts:`<script setup lang="ts"> 145import { register } from 'swiper/element/bundle' 146 147register() 148<\/script> 149 150<template> 151 <!-- eslint-disable vue/attribute-hyphenation --> 152 <div class="swiper-centered-slide"> 153 <swiper-container 154 navigation="true" 155 centered-slides="true" 156 space-between="30" 157 slides-per-view="1" 158 events-prefix="swiper-" 159 :injectStyles="[ 160 \` 161 .swiper-button-next, .swiper-button-prev{ 162 background: rgb(var(--v-theme-primary)) !important; 163 color: #fff !important; 164 padding-inline: 0.45rem !important; 165 padding-block: 0.45rem !important; 166 inline-size: 1rem !important; 167 block-size: 1rem !important; 168 border-radius: 50% 169 } 170 \`, 171 ]" 172 :breakpoints="{ 173 992: { 174 slidesPerView: 4, 175 spaceBetween: 30, 176 }, 177 780: { 178 slidesPerView: 3, 179 spaceBetween: 30, 180 }, 181 460: { 182 slidesPerView: 2, 183 spaceBetween: 20, 184 }, 185 }" 186 > 187 <swiper-slide 188 v-for="{ icon, text } in [ 189 { icon: 'tabler-brand-github', text: 'Getting Started' }, 190 { icon: 'tabler-brand-facebook', text: 'Pricing & Plans' }, 191 { icon: 'tabler-brand-twitter', text: 'Sales Question' }, 192 { icon: 'tabler-brand-instagram', text: 'Usage Guidelines' }, 193 { icon: 'tabler-brand-gitlab', text: 'General Guide' }, 194 ]" 195 :key="text" 196 > 197 <VCard> 198 <VCardText> 199 <div class="d-flex flex-column align-center gap-y-3"> 200 <VIcon 201 :icon="icon" 202 size="28" 203 />
204 <span class="text-high-emphasis">{{ text }}</span> 205 </div> 206 </VCardText> 207 </VCard> 208 </swiper-slide> 209 </swiper-container> 210 </div> 211</template> 212 213<style lang="scss" scoped> 214swiper-slide { 215 padding-block: 1rem; 216 217 &.swiper-slide-active { 218 .v-card { 219 border: 1px solid rgb(var(--v-theme-primary)); 220 221 .v-icon { 222 color: rgb(var(--v-theme-primary)); 223 } 224 } 225 } 226} 227</style> 228`,js:`<script setup> 229import { register } from 'swiper/element/bundle' 230 231register() 232<\/script> 233 234<template> 235 <!-- eslint-disable vue/attribute-hyphenation --> 236 <div class="swiper-centered-slide"> 237 <swiper-container 238 navigation="true" 239 centered-slides="true" 240 space-between="30" 241 slides-per-view="1" 242 events-prefix="swiper-" 243 :injectStyles="[ 244 \` 245 .swiper-button-next, .swiper-button-prev{ 246 background: rgb(var(--v-theme-primary)) !important; 247 color: #fff !important; 248 padding-inline: 0.45rem !important; 249 padding-block: 0.45rem !important; 250 inline-size: 1rem !important; 251 block-size: 1rem !important; 252 border-radius: 50% 253 } 254 \`, 255 ]" 256 :breakpoints="{ 257 992: { 258 slidesPerView: 4, 259 spaceBetween: 30, 260 }, 261 780: { 262 slidesPerView: 3, 263 spaceBetween: 30, 264 }, 265 460: { 266 slidesPerView: 2, 267 spaceBetween: 20, 268 }, 269 }" 270 > 271 <swiper-slide 272 v-for="{ icon, text } in [ 273 { icon: 'tabler-brand-github', text: 'Getting Started' }, 274 { icon: 'tabler-brand-facebook', text: 'Pricing & Plans' }, 275 { icon: 'tabler-brand-twitter', text: 'Sales Question' }, 276 { icon: 'tabler-brand-instagram', text: 'Usage Guidelines' }, 277 { icon: 'tabler-brand-gitlab', text: 'General Guide' }, 278 ]" 279 :key="text" 280 > 281 <VCard> 282 <VCardText> 283 <div class="d-flex flex-column align-center gap-y-3"> 284 <VIcon 285 :icon="icon" 286 size="28" 287 /> 288 <span class="text-high-emphasis">{{ text }}</span> 289 </div> 290 </VCardText> 291 </VCard> 292 </swiper-slide> 293 </swiper-container> 294 </div> 295</template> 296 297<style lang="scss" scoped> 298swiper-slide { 299 padding-block: 1rem; 300 301 &.swiper-slide-active { 302 .v-card { 303 border: 1px solid rgb(var(--v-theme-primary)); 304 305 .v-icon { 306 color: rgb(var(--v-theme-primary)); 307 } 308 } 309 } 310} 311</style> 312`},_r={ts:`<script setup lang="ts"> 313import { register } from 'swiper/element/bundle' 314 315register() 316<\/script> 317 318<template> 319 <swiper-container 320 centered-slides="true" 321 space-between="30" 322 slides-per-view="1" 323 events-prefix="swiper-" 324 :breakpoints="{ 325 992: { 326 slidesPerView: 4, 327 spaceBetween: 30, 328 }, 329 780: { 330 slidesPerView: 3, 331 spaceBetween: 30, 332 }, 333 460: { 334 slidesPerView: 2, 335 spaceBetween: 20, 336 }, 337 }" 338 > 339 <swiper-slide 340 v-for="{ icon, text } in [ 341 { icon: 'tabler-brand-github', text: 'Getting Started' }, 342 { icon: 'tabler-brand-facebook', text: 'Pricing & Plans' }, 343 { icon: 'tabler-brand-twitter', text: 'Sales Question' }, 344 { icon: 'tabler-brand-instagram', text: 'Usage Guidelines' }, 345 { icon: 'tabler-brand-gitlab', text: 'General Guide' }, 346 ]" 347 :key="text" 348 > 349 <VCard class="bg-default"> 350 <VCardText> 351 <div class="d-flex align-center gap-x-3"> 352 <VIcon 353 :icon="icon" 354 size="28" 355 /> 356 <span class="font-weight-medium">{{ text }}</span> 357 </div> 358 </VCardText> 359 </VCard> 360 </swiper-slide> 361 </swiper-container> 362</template> 363 364<style lang="scss" scoped> 365swiper-slide { 366 padding-block: 1rem; 367 368 &.swiper-slide-active { 369 .v-card { 370 border: 1px solid rgb(var(--v-theme-primary)); 371 background: rgb(var(--v-theme-primary)); 372 color: rgb(var(--v-theme-on-primary)); 373 } 374 } 375} 376</style> 377`,js:`<script setup> 378import { register } from 'swiper/element/bundle' 379 380register() 381<\/script> 382 383<template>
384 <swiper-container 385 centered-slides="true" 386 space-between="30" 387 slides-per-view="1" 388 events-prefix="swiper-" 389 :breakpoints="{ 390 992: { 391 slidesPerView: 4, 392 spaceBetween: 30, 393 }, 394 780: { 395 slidesPerView: 3, 396 spaceBetween: 30, 397 }, 398 460: { 399 slidesPerView: 2, 400 spaceBetween: 20, 401 }, 402 }" 403 > 404 <swiper-slide 405 v-for="{ icon, text } in [ 406 { icon: 'tabler-brand-github', text: 'Getting Started' }, 407 { icon: 'tabler-brand-facebook', text: 'Pricing & Plans' }, 408 { icon: 'tabler-brand-twitter', text: 'Sales Question' }, 409 { icon: 'tabler-brand-instagram', text: 'Usage Guidelines' }, 410 { icon: 'tabler-brand-gitlab', text: 'General Guide' }, 411 ]" 412 :key="text" 413 > 414 <VCard class="bg-default"> 415 <VCardText> 416 <div class="d-flex align-center gap-x-3"> 417 <VIcon 418 :icon="icon" 419 size="28" 420 /> 421 <span class="font-weight-medium">{{ text }}</span> 422 </div> 423 </VCardText> 424 </VCard> 425 </swiper-slide> 426 </swiper-container> 427</template> 428 429<style lang="scss" scoped> 430swiper-slide { 431 padding-block: 1rem; 432 433 &.swiper-slide-active { 434 .v-card { 435 border: 1px solid rgb(var(--v-theme-primary)); 436 background: rgb(var(--v-theme-primary)); 437 color: rgb(var(--v-theme-on-primary)); 438 } 439 } 440} 441</style> 442`},jr={ts:`<script setup lang="ts"> 443import { register } from 'swiper/element/bundle' 444import swiper31 from '@images/banner/banner-31.jpg' 445import swiper32 from '@images/banner/banner-32.jpg' 446import swiper33 from '@images/banner/banner-33.jpg' 447import swiper34 from '@images/banner/banner-34.jpg' 448import swiper35 from '@images/banner/banner-35.jpg' 449import swiper36 from '@images/banner/banner-36.jpg' 450import swiper37 from '@images/banner/banner-37.jpg' 451import swiper38 from '@images/banner/banner-38.jpg' 452import swiper39 from '@images/banner/banner-39.jpg' 453 454register() 455<\/script> 456 457<template> 458 <swiper-container 459 pagination="true" 460 effect="coverflow" 461 grab-cursor="true" 462 centered-slides="true" 463 slides-per-view="auto" 464 coverflow-effect-rotate="50" 465 coverflow-effect-stretch="0" 466 coverflow-effect-depth="100" 467 coverflow-effect-modifier="1" 468 coverflow-effect-slide-shadows="true" 469 events-prefix="swiper-" 470 > 471 <swiper-slide 472 v-for="swiperImg in [ 473 swiper31, 474 swiper32, 475 swiper33, 476 swiper34, 477 swiper35, 478 swiper36, 479 swiper37, 480 swiper38, 481 swiper39, 482 ]" 483 :key="swiperImg" 484 > 485 <VImg :src="swiperImg" /> 486 </swiper-slide> 487 </swiper-container> 488</template> 489 490<style lang="scss" scoped> 491swiper-slide { 492 background-position: center; 493 background-size: cover; 494 block-size: 300px; 495 inline-size: 300px; 496} 497</style> 498`,js:`<script setup> 499import { register } from 'swiper/element/bundle' 500import swiper31 from '@images/banner/banner-31.jpg' 501import swiper32 from '@images/banner/banner-32.jpg' 502import swiper33 from '@images/banner/banner-33.jpg' 503import swiper34 from '@images/banner/banner-34.jpg' 504import swiper35 from '@images/banner/banner-35.jpg' 505import swiper36 from '@images/banner/banner-36.jpg' 506import swiper37 from '@images/banner/banner-37.jpg' 507import swiper38 from '@images/banner/banner-38.jpg' 508import swiper39 from '@images/banner/banner-39.jpg' 509 510register() 511<\/script> 512 513<template> 514 <swiper-container 515 pagination="true" 516 effect="coverflow" 517 grab-cursor="true" 518 centered-slides="true" 519 slides-per-view="auto" 520 coverflow-effect-rotate="50" 521 coverflow-effect-stretch="0" 522 coverflow-effect-depth="100" 523 coverflow-effect-modifier="1" 524 coverflow-effect-slide-shadows="true" 525 events-prefix="swiper-" 526 > 527 <swiper-slide 528 v-for="swiperImg in [ 529 swiper31, 530 swiper32, 531 swiper33, 532 swiper34, 533 swiper35, 534 swiper36, 535 swiper37, 536 swiper38, 537 swiper39, 538 ]" 539 :key="swiperImg" 540 > 541 <VImg :src="swiperImg" /> 542 </swiper-slide> 543 </swiper-container> 544</template> 545 546<style lang="scss" scoped> 547swiper-slide { 548 background-position: center; 549 background-size: cover; 550 block-size: 300px; 551 inline-size: 300px; 552} 553</style> 554`},xr={ts:`<script setup lang="ts"> 555import { register } from 'swiper/element/bundle' 556import swiper21 from '@images/banner/banner-21.jpg' 557import swiper23 from '@images/banner/banner-23.jpg' 558import swiper24 from '@images/banner/banner-24.jpg' 559import swiper32 from '@images/banner/banner-32.jpg' 560 561register() 562<\/script> 563 564<template>
565 <swiper-container 566 pagination="true" 567 centered-slides="true" 568 effect="cube" 569 grab-cursor="true" 570 cube-effect-shadow="true" 571 cube-effect-slide-shadows="true" 572 cube-effect-shadow-scale="0.94" 573 events-prefix="swiper-" 574 > 575 <swiper-slide 576 v-for="swiperImg in [ 577 swiper21, 578 swiper32, 579 swiper23, 580 swiper24, 581 ]" 582 :key="swiperImg" 583 > 584 <VImg :src="swiperImg" /> 585 </swiper-slide> 586 </swiper-container> 587</template> 588 589<style lang="scss" scoped> 590swiper-slide { 591 background-position: center; 592 background-size: cover; 593 block-size: 250px; 594 inline-size: 250px; 595} 596 597swiper-container { 598 margin: auto; 599 block-size: 250px; 600 inline-size: 250px; 601} 602</style> 603`,js:`<script setup> 604import { register } from 'swiper/element/bundle' 605import swiper21 from '@images/banner/banner-21.jpg' 606import swiper23 from '@images/banner/banner-23.jpg' 607import swiper24 from '@images/banner/banner-24.jpg' 608import swiper32 from '@images/banner/banner-32.jpg' 609 610register() 611<\/script> 612 613<template> 614 <swiper-container 615 pagination="true" 616 centered-slides="true" 617 effect="cube" 618 grab-cursor="true" 619 cube-effect-shadow="true" 620 cube-effect-slide-shadows="true" 621 cube-effect-shadow-scale="0.94" 622 events-prefix="swiper-" 623 > 624 <swiper-slide 625 v-for="swiperImg in [ 626 swiper21, 627 swiper32, 628 swiper23, 629 swiper24, 630 ]" 631 :key="swiperImg" 632 > 633 <VImg :src="swiperImg" /> 634 </swiper-slide> 635 </swiper-container> 636</template> 637 638<style lang="scss" scoped> 639swiper-slide { 640 background-position: center; 641 background-size: cover; 642 block-size: 250px; 643 inline-size: 250px; 644} 645 646swiper-container { 647 margin: auto; 648 block-size: 250px; 649 inline-size: 250px; 650} 651</style> 652`},yr={ts:`<script setup lang="ts"> 653import { register } from 'swiper/element/bundle' 654import swiper16 from '@images/banner/banner-16.jpg' 655import swiper17 from '@images/banner/banner-17.jpg' 656import swiper18 from '@images/banner/banner-18.jpg' 657import swiper19 from '@images/banner/banner-19.jpg' 658import swiper20 from '@images/banner/banner-20.jpg' 659 660register() 661<\/script> 662 663<template> 664 <swiper-container 665 space-between="30" 666 pagination="true" 667 navigation="true" 668 effect="fade" 669 events-prefix="swiper-" 670 > 671 <swiper-slide 672 v-for="swiperImg in [ 673 swiper20, 674 swiper19, 675 swiper18, 676 swiper17, 677 swiper16, 678 ]" 679 :key="swiperImg" 680 > 681 <VImg :src="swiperImg" /> 682 </swiper-slide> 683 </swiper-container> 684</template> 685`,js:`<script setup> 686import { register } from 'swiper/element/bundle' 687import swiper16 from '@images/banner/banner-16.jpg' 688import swiper17 from '@images/banner/banner-17.jpg' 689import swiper18 from '@images/banner/banner-18.jpg' 690import swiper19 from '@images/banner/banner-19.jpg' 691import swiper20 from '@images/banner/banner-20.jpg' 692 693register() 694<\/script> 695 696<template> 697 <swiper-container 698 space-between="30" 699 pagination="true" 700 navigation="true" 701 effect="fade" 702 events-prefix="swiper-" 703 > 704 <swiper-slide 705 v-for="swiperImg in [ 706 swiper20, 707 swiper19, 708 swiper18, 709 swiper17, 710 swiper16, 711 ]" 712 :key="swiperImg" 713 > 714 <VImg :src="swiperImg" /> 715 </swiper-slide> 716 </swiper-container> 717</template> 718`},kr={ts:`<script setup lang="ts"> 719import { register } from 'swiper/element/bundle' 720 721import swiper11 from '@images/banner/banner-11.jpg' 722import swiper12 from '@images/banner/banner-12.jpg' 723import swiper13 from '@images/banner/banner-13.jpg' 724import swiper15 from '@images/banner/banner-15.jpg' 725import swiper16 from '@images/banner/banner-16.jpg' 726 727register() 728<\/script> 729 730<template> 731 <swiper-container 732 class="mySwiper" 733 thumbs-swiper=".mySwiper2" 734 loop="true" 735 space-between="10" 736 navigation="true" 737 centered-slides="true" 738 events-prefix="swiper-" 739 > 740 <swiper-slide 741 v-for="swiperImg in [ 742 swiper11, 743 swiper12, 744 swiper13, 745 swiper15, 746 swiper16, 747 swiper11, 748 swiper12, 749 swiper13, 750 751 ]" 752 :key="swiperImg" 753 > 754 <VImg 755 :src="swiperImg" 756 cover 757 />
758 </swiper-slide> 759 </swiper-container> 760 761 <swiper-container 762 class="mySwiper2" 763 loop="true" 764 free-mode="true" 765 events-prefix="swiper-" 766 slides-per-view="4" 767 > 768 <swiper-slide 769 v-for="swiperImg in [ 770 swiper11, 771 swiper12, 772 swiper13, 773 swiper15, 774 swiper16, 775 swiper11, 776 swiper12, 777 swiper13, 778 ]" 779 :key="swiperImg" 780 > 781 <VImg 782 :src="swiperImg" 783 cover 784 /> 785 </swiper-slide> 786 </swiper-container> 787</template> 788 789<style lang="scss" scoped> 790swiper-container { 791 background-color: #000; 792} 793 794.mySwiper2 { 795 swiper-slide { 796 border: 5px solid black; 797 block-size: 100%; 798 inline-size: 25%; 799 opacity: 0.4; 800 } 801 802 .swiper-slide-thumb-active { 803 opacity: 1; 804 } 805} 806</style> 807`,js:`<script setup> 808import { register } from 'swiper/element/bundle' 809import swiper11 from '@images/banner/banner-11.jpg' 810import swiper12 from '@images/banner/banner-12.jpg' 811import swiper13 from '@images/banner/banner-13.jpg' 812import swiper15 from '@images/banner/banner-15.jpg' 813import swiper16 from '@images/banner/banner-16.jpg' 814 815register() 816<\/script> 817 818<template> 819 <swiper-container 820 class="mySwiper" 821 thumbs-swiper=".mySwiper2" 822 loop="true" 823 space-between="10" 824 navigation="true" 825 centered-slides="true" 826 events-prefix="swiper-" 827 > 828 <swiper-slide 829 v-for="swiperImg in [ 830 swiper11, 831 swiper12, 832 swiper13, 833 swiper15, 834 swiper16, 835 swiper11, 836 swiper12, 837 swiper13, 838 839 ]" 840 :key="swiperImg" 841 > 842 <VImg 843 :src="swiperImg" 844 cover 845 /> 846 </swiper-slide> 847 </swiper-container> 848 849 <swiper-container 850 class="mySwiper2" 851 loop="true" 852 free-mode="true" 853 events-prefix="swiper-" 854 slides-per-view="4" 855 > 856 <swiper-slide 857 v-for="swiperImg in [ 858 swiper11, 859 swiper12, 860 swiper13, 861 swiper15, 862 swiper16, 863 swiper11, 864 swiper12, 865 swiper13, 866 ]" 867 :key="swiperImg" 868 > 869 <VImg 870 :src="swiperImg" 871 cover 872 /> 873 </swiper-slide> 874 </swiper-container> 875</template> 876 877<style lang="scss" scoped> 878swiper-container { 879 background-color: #000; 880} 881 882.mySwiper2 { 883 swiper-slide { 884 border: 5px solid black; 885 block-size: 100%; 886 inline-size: 25%; 887 opacity: 0.4; 888 } 889 890 .swiper-slide-thumb-active { 891 opacity: 1; 892 } 893} 894</style> 895`},Sr={ts:`<script setup lang="ts"> 896import { register } from 'swiper/element/bundle' 897import swiper26 from '@images/banner/banner-26.jpg' 898import swiper28 from '@images/banner/banner-28.jpg' 899import swiper29 from '@images/banner/banner-29.jpg' 900import swiper30 from '@images/banner/banner-30.jpg' 901import swiper31 from '@images/banner/banner-31.jpg' 902import swiper32 from '@images/banner/banner-32.jpg' 903import swiper33 from '@images/banner/banner-33.jpg' 904import swiper34 from '@images/banner/banner-34.jpg' 905import swiper35 from '@images/banner/banner-35.jpg' 906import swiper39 from '@images/banner/banner-39.jpg' 907 908register() 909<\/script> 910 911<template> 912 <swiper-container 913 slides-per-view="4" 914 grid-fill="rows" 915 space-between="30" 916 grid-rows="2" 917 pagination-clickable="true" 918 events-prefix="swiper-" 919 > 920 <swiper-slide 921 v-for="swiperImg in [ 922 swiper26, 923 swiper39, 924 swiper28, 925 swiper29, 926 swiper30, 927 swiper31, 928 swiper32, 929 swiper33, 930 swiper34, 931 swiper35, 932 swiper26, 933 swiper39, 934 ]" 935 :key="swiperImg" 936 > 937 <VImg :src="swiperImg" /> 938 </swiper-slide> 939 </swiper-container> 940</template> 941`,js:`<script setup> 942import { register } from 'swiper/element/bundle' 943import swiper26 from '@images/banner/banner-26.jpg' 944import swiper28 from '@images/banner/banner-28.jpg' 945import swiper29 from '@images/banner/banner-29.jpg' 946import swiper30 from '@images/banner/banner-30.jpg' 947import swiper31 from '@images/banner/banner-31.jpg' 948import swiper32 from '@images/banner/banner-32.jpg' 949import swiper33 from '@images/banner/banner-33.jpg' 950import swiper34 from '@images/banner/banner-34.jpg' 951import swiper35 from '@images/banner/banner-35.jpg' 952import swiper39 from '@images/banner/banner-39.jpg' 953 954register() 955<\/script> 956 957<template>
958 <swiper-container 959 slides-per-view="4" 960 grid-fill="rows" 961 space-between="30" 962 grid-rows="2" 963 pagination-clickable="true" 964 events-prefix="swiper-" 965 > 966 <swiper-slide 967 v-for="swiperImg in [ 968 swiper26, 969 swiper39, 970 swiper28, 971 swiper29, 972 swiper30, 973 swiper31, 974 swiper32, 975 swiper33, 976 swiper34, 977 swiper35, 978 swiper26, 979 swiper39, 980 ]" 981 :key="swiperImg" 982 > 983 <VImg :src="swiperImg" /> 984 </swiper-slide> 985 </swiper-container> 986</template> 987`},Vr={ts:`<script setup lang="ts"> 988import { register } from 'swiper/element/bundle' 989import swiper20 from '@images/banner/banner-20.jpg' 990import swiper4 from '@images/banner/banner-4.jpg' 991import swiper5 from '@images/banner/banner-5.jpg' 992import swiper7 from '@images/banner/banner-7.jpg' 993import swiper8 from '@images/banner/banner-8.jpg' 994import swiper9 from '@images/banner/banner-9.jpg' 995 996register() 997<\/script> 998 999<template> 1000 <swiper-container 1001 pagination-clickable="true" 1002 autoplay="true" 1003 navigation="true" 1004 events-prefix="swiper-" 1005 > 1006 <swiper-slide 1007 v-for="swiperImg in [ 1008 swiper4, 1009 swiper5, 1010 swiper9, 1011 swiper7, 1012 swiper8, 1013 swiper20, 1014 ]" 1015 :key="swiperImg" 1016 lazy="true" 1017 > 1018 <VImg 1019 :src="swiperImg" 1020 cover 1021 loading="lazy" 1022 /> 1023 </swiper-slide> 1024 </swiper-container> 1025</template> 1026`,js:`<script setup> 1027import { register } from 'swiper/element/bundle' 1028import swiper20 from '@images/banner/banner-20.jpg' 1029import swiper4 from '@images/banner/banner-4.jpg' 1030import swiper5 from '@images/banner/banner-5.jpg' 1031import swiper7 from '@images/banner/banner-7.jpg' 1032import swiper8 from '@images/banner/banner-8.jpg' 1033import swiper9 from '@images/banner/banner-9.jpg' 1034 1035register() 1036<\/script> 1037 1038<template> 1039 <swiper-container 1040 pagination-clickable="true" 1041 autoplay="true" 1042 navigation="true" 1043 events-prefix="swiper-" 1044 > 1045 <swiper-slide 1046 v-for="swiperImg in [ 1047 swiper4, 1048 swiper5, 1049 swiper9, 1050 swiper7, 1051 swiper8, 1052 swiper20, 1053 ]" 1054 :key="swiperImg" 1055 lazy="true" 1056 > 1057 <VImg 1058 :src="swiperImg" 1059 cover 1060 loading="lazy" 1061 /> 1062 </swiper-slide> 1063 </swiper-container> 1064</template> 1065`},Ir={ts:`<script setup lang="ts"> 1066import { register } from 'swiper/element/bundle' 1067import swiper31 from '@images/banner/banner-31.jpg' 1068import swiper32 from '@images/banner/banner-32.jpg' 1069import swiper33 from '@images/banner/banner-33.jpg' 1070import swiper34 from '@images/banner/banner-34.jpg' 1071import swiper35 from '@images/banner/banner-35.jpg' 1072 1073register() 1074<\/script> 1075 1076<template> 1077 <swiper-container 1078 pagination="true" 1079 slides-per-view="3" 1080 space-between="25" 1081 events-prefix="swiper-" 1082 > 1083 <swiper-slide 1084 v-for="swiperImg in [ 1085 swiper31, 1086 swiper32, 1087 swiper33, 1088 swiper34, 1089 swiper35, 1090 ]" 1091 :key="swiperImg" 1092 > 1093 <VImg :src="swiperImg" /> 1094 </swiper-slide> 1095 </swiper-container> 1096</template> 1097`,js:`<script setup> 1098import { register } from 'swiper/element/bundle' 1099import swiper31 from '@images/banner/banner-31.jpg' 1100import swiper32 from '@images/banner/banner-32.jpg' 1101import swiper33 from '@images/banner/banner-33.jpg' 1102import swiper34 from '@images/banner/banner-34.jpg' 1103import swiper35 from '@images/banner/banner-35.jpg' 1104 1105register() 1106<\/script> 1107 1108<template> 1109 <swiper-container 1110 pagination="true" 1111 slides-per-view="3" 1112 space-between="25" 1113 events-prefix="swiper-" 1114 > 1115 <swiper-slide 1116 v-for="swiperImg in [ 1117 swiper31, 1118 swiper32, 1119 swiper33, 1120 swiper34, 1121 swiper35, 1122 ]" 1123 :key="swiperImg" 1124 > 1125 <VImg :src="swiperImg" /> 1126 </swiper-slide> 1127 </swiper-container> 1128</template> 1129`},hr={ts:`<script setup lang="ts"> 1130import { register } from 'swiper/element/bundle' 1131 1132import swiper14 from '@images/banner/banner-14.jpg' 1133import swiper2 from '@images/banner/banner-2.jpg' 1134import swiper3 from '@images/banner/banner-3.jpg' 1135import swiper4 from '@images/banner/banner-4.jpg' 1136import swiper7 from '@images/banner/banner-7.jpg' 1137 1138register() 1139<\/script> 1140 1141<template>
1142 <swiper-container 1143 navigation="true" 1144 events-prefix="swiper-" 1145 > 1146 <swiper-slide 1147 v-for="swiperImg in [ 1148 swiper7, 1149 swiper4, 1150 swiper14, 1151 swiper3, 1152 swiper2, 1153 ]" 1154 :key="swiperImg" 1155 > 1156 <VImg :src="swiperImg" /> 1157 </swiper-slide> 1158 </swiper-container> 1159</template> 1160`,js:`<script setup> 1161import { register } from 'swiper/element/bundle' 1162import swiper14 from '@images/banner/banner-14.jpg' 1163import swiper2 from '@images/banner/banner-2.jpg' 1164import swiper3 from '@images/banner/banner-3.jpg' 1165import swiper4 from '@images/banner/banner-4.jpg' 1166import swiper7 from '@images/banner/banner-7.jpg' 1167 1168register() 1169<\/script> 1170 1171<template> 1172 <swiper-container 1173 navigation="true" 1174 events-prefix="swiper-" 1175 > 1176 <swiper-slide 1177 v-for="swiperImg in [ 1178 swiper7, 1179 swiper4, 1180 swiper14, 1181 swiper3, 1182 swiper2, 1183 ]" 1184 :key="swiperImg" 1185 > 1186 <VImg :src="swiperImg" /> 1187 </swiper-slide> 1188 </swiper-container> 1189</template> 1190`},Br={ts:`<script setup lang="ts"> 1191import { register } from 'swiper/element/bundle' 1192import swiper8 from '@images/banner/banner-8.jpg' 1193import swiper9 from '@images/banner/banner-9.jpg' 1194 1195import swiper12 from '@images/banner/banner-12.jpg' 1196import swiper20 from '@images/banner/banner-20.jpg' 1197import swiper7 from '@images/banner/banner-7.jpg' 1198 1199register() 1200<\/script> 1201 1202<template> 1203 <swiper-container 1204 pagination="true" 1205 events-prefix="swiper-" 1206 > 1207 <swiper-slide 1208 v-for="swiperImg in [ 1209 swiper12, 1210 swiper9, 1211 swiper8, 1212 swiper7, 1213 swiper20, 1214 ]" 1215 :key="swiperImg" 1216 > 1217 <VImg :src="swiperImg" /> 1218 </swiper-slide> 1219 </swiper-container> 1220</template> 1221`,js:`<script setup> 1222import { register } from 'swiper/element/bundle' 1223import swiper8 from '@images/banner/banner-8.jpg' 1224import swiper9 from '@images/banner/banner-9.jpg' 1225import swiper12 from '@images/banner/banner-12.jpg' 1226import swiper20 from '@images/banner/banner-20.jpg' 1227import swiper7 from '@images/banner/banner-7.jpg' 1228 1229register() 1230<\/script> 1231 1232<template> 1233 <swiper-container 1234 pagination="true" 1235 events-prefix="swiper-" 1236 > 1237 <swiper-slide 1238 v-for="swiperImg in [ 1239 swiper12, 1240 swiper9, 1241 swiper8, 1242 swiper7, 1243 swiper20, 1244 ]" 1245 :key="swiperImg" 1246 > 1247 <VImg :src="swiperImg" /> 1248 </swiper-slide> 1249 </swiper-container> 1250</template> 1251`},Pr={ts:`<script setup lang="ts"> 1252import { register } from 'swiper/element/bundle' 1253import swiper5 from '@images/banner/banner-5.jpg' 1254import swiper8 from '@images/banner/banner-8.jpg' 1255 1256import swiper20 from '@images/banner/banner-20.jpg' 1257import swiper4 from '@images/banner/banner-4.jpg' 1258import swiper7 from '@images/banner/banner-7.jpg' 1259 1260register() 1261<\/script> 1262 1263<template> 1264 <swiper-container 1265 navigation="true" 1266 pagination-type="progressbar" 1267 events-prefix="swiper-" 1268 > 1269 <swiper-slide 1270 v-for="swiperImg in [ 1271 swiper8, 1272 swiper7, 1273 swiper20, 1274 swiper4, 1275 swiper5, 1276 ]" 1277 :key="swiperImg" 1278 > 1279 <VImg :src="swiperImg" /> 1280 </swiper-slide> 1281 </swiper-container> 1282</template> 1283`,js:`<script setup> 1284import { register } from 'swiper/element/bundle' 1285import swiper5 from '@images/banner/banner-5.jpg' 1286import swiper8 from '@images/banner/banner-8.jpg' 1287import swiper20 from '@images/banner/banner-20.jpg' 1288import swiper4 from '@images/banner/banner-4.jpg' 1289import swiper7 from '@images/banner/banner-7.jpg' 1290 1291register() 1292<\/script> 1293 1294<template> 1295 <swiper-container 1296 navigation="true" 1297 pagination-type="progressbar" 1298 events-prefix="swiper-" 1299 > 1300 <swiper-slide 1301 v-for="swiperImg in [ 1302 swiper8, 1303 swiper7, 1304 swiper20, 1305 swiper4, 1306 swiper5, 1307 ]" 1308 :key="swiperImg" 1309 > 1310 <VImg :src="swiperImg" /> 1311 </swiper-slide> 1312 </swiper-container> 1313</template> 1314`},$r={ts:`<script setup lang="ts"> 1315import { register } from 'swiper/element/bundle' 1316import swiper31 from '@images/banner/banner-31.jpg' 1317import swiper32 from '@images/banner/banner-32.jpg' 1318import swiper33 from '@images/banner/banner-33.jpg' 1319import swiper34 from '@images/banner/banner-34.jpg' 1320import swiper35 from '@images/banner/banner-35.jpg' 1321import swiper36 from '@images/banner/banner-36.jpg' 1322import swiper37 from '@images/banner/banner-37.jpg' 1323import swiper38 from '@images/banner/banner-38.jpg' 1324import swiper39 from '@images/banner/banner-39.jpg' 1325 1326register() 1327<\/script> 1328 1329<template>
1330 <swiper-container 1331 pagination-clickable="true" 1332 slides-per-view="5" 1333 space-between="50" 1334 events-prefix="swiper-" 1335 :breakpoints="{ 1336 1024: { 1337 slidesPerView: 4, 1338 spaceBetween: 40, 1339 }, 1340 768: { 1341 slidesPerView: 3, 1342 spaceBetween: 30, 1343 }, 1344 640: { 1345 slidesPerView: 2, 1346 spaceBetween: 20, 1347 }, 1348 320: { 1349 slidesPerView: 1, 1350 spaceBetween: 10, 1351 }, 1352 }" 1353 > 1354 <swiper-slide 1355 v-for="swiperImg in [ 1356 swiper31, 1357 swiper32, 1358 swiper33, 1359 swiper34, 1360 swiper35, 1361 swiper36, 1362 swiper37, 1363 swiper38, 1364 swiper39, 1365 ]" 1366 :key="swiperImg" 1367 > 1368 <VImg :src="swiperImg" /> 1369 </swiper-slide> 1370 </swiper-container> 1371</template> 1372`,js:`<script setup> 1373import { register } from 'swiper/element/bundle' 1374import swiper31 from '@images/banner/banner-31.jpg' 1375import swiper32 from '@images/banner/banner-32.jpg' 1376import swiper33 from '@images/banner/banner-33.jpg' 1377import swiper34 from '@images/banner/banner-34.jpg' 1378import swiper35 from '@images/banner/banner-35.jpg' 1379import swiper36 from '@images/banner/banner-36.jpg' 1380import swiper37 from '@images/banner/banner-37.jpg' 1381import swiper38 from '@images/banner/banner-38.jpg' 1382import swiper39 from '@images/banner/banner-39.jpg' 1383 1384register() 1385<\/script> 1386 1387<template> 1388 <swiper-container 1389 pagination-clickable="true" 1390 slides-per-view="5" 1391 space-between="50" 1392 events-prefix="swiper-" 1393 :breakpoints="{ 1394 1024: { 1395 slidesPerView: 4, 1396 spaceBetween: 40, 1397 }, 1398 768: { 1399 slidesPerView: 3, 1400 spaceBetween: 30, 1401 }, 1402 640: { 1403 slidesPerView: 2, 1404 spaceBetween: 20, 1405 }, 1406 320: { 1407 slidesPerView: 1, 1408 spaceBetween: 10, 1409 }, 1410 }" 1411 > 1412 <swiper-slide 1413 v-for="swiperImg in [ 1414 swiper31, 1415 swiper32, 1416 swiper33, 1417 swiper34, 1418 swiper35, 1419 swiper36, 1420 swiper37, 1421 swiper38, 1422 swiper39, 1423 ]" 1424 :key="swiperImg" 1425 > 1426 <VImg :src="swiperImg" /> 1427 </swiper-slide> 1428 </swiper-container> 1429</template> 1430`},Cr={ts:`<script setup lang="ts"> 1431import { register } from 'swiper/element/bundle' 1432 1433register() 1434 1435const slides = Array.from({ length: 500 }, (_, index) => \`Slides \${index + 1}\`) 1436const swiperEl = ref<any>(null) 1437const prependNumber = ref(1) 1438const appendNumber = ref(500) 1439 1440const toSlide = (index: number) => { 1441 swiperEl.value?.swiper.slideTo(index - 1) 1442} 1443 1444const prependSlide = () => { 1445 swiperEl.value?.swiper.prependSlide([ 1446 \`<swiper-slide>Slide \${(--prependNumber.value)} </swiper-slide>\`, 1447 \`<swiper-slide>Slide \${(--prependNumber.value)} </swiper-slide>\`, 1448 ]) 1449} 1450 1451const appendSlide = () => { 1452 swiperEl.value?.swiper.appendSlide([ 1453 \`<swiper-slide>Slide \${(++appendNumber.value)} </swiper-slide>\`, 1454 ]) 1455} 1456<\/script> 1457 1458<template> 1459 <section class="swiper-virtual"> 1460 <swiper-container 1461 ref="swiperEl" 1462 virtual="true" 1463 :slides="slides" 1464 navigation="true" 1465 slides-per-view="5" 1466 space-between="50" 1467 free-mode="true" 1468 events-prefix="swiper-" 1469 :breakpoints="{ 1470 1024: { 1471 slidesPerView: 4, 1472 spaceBetween: 40, 1473 }, 1474 768: { 1475 slidesPerView: 3, 1476 spaceBetween: 30, 1477 }, 1478 640: { 1479 slidesPerView: 2, 1480 spaceBetween: 20, 1481 }, 1482 320: { 1483 slidesPerView: 1, 1484 spaceBetween: 10, 1485 }, 1486 }" 1487 > 1488 <swiper-slide 1489 v-for="(item, index) in slides" 1490 :key="index" 1491 > 1492 <div class="text-secondary"> 1493 {{ item }} 1494 </div> 1495 </swiper-slide> 1496 </swiper-container> 1497 1498 <div class="d-flex justify-center gap-4 flex-wrap"> 1499 <VBtn 1500 variant="outlined" 1501 color="primary" 1502 @click.prevent="prependSlide" 1503 > 1504 Prepend 2 Slides 1505 </VBtn> 1506 <VBtn 1507 variant="outlined" 1508 color="primary" 1509 @click.prevent="toSlide(1)" 1510 > 1511 Slide 1 1512 </VBtn> 1513 <VBtn 1514 variant="outlined" 1515 color="primary" 1516 @click.prevent="toSlide(250)" 1517 > 1518 Slide 250 1519 </VBtn> 1520 <VBtn 1521 variant="outlined" 1522 color="primary" 1523 @click.prevent="toSlide(500)" 1524 > 1525 Slide 500 1526 </VBtn> 1527 <VBtn 1528 variant="outlined" 1529 color="primary" 1530 @click.prevent="appendSlide" 1531 > 1532 Append Slide 1533 </VBtn> 1534 </div> 1535 </section> 1536</template> 1537 1538<style lang="scss"> 1539.swiper-virtual { 1540 swiper-slide { 1541 display: flex; 1542 align-items: center; 1543 justify-content: center; 1544 background: #eee; 1545 font-size: 18px; 1546 text-align: center; 1547 } 1548 1549 swiper-container { 1550 block-size: 300px; 1551 inline-size: 100%; 1552 margin-block: 20px; 1553 margin-inline: auto; 1554 } 1555} 1556</style> 1557`,js:`<script setup> 1558import { register } from 'swiper/element/bundle' 1559 1560register() 1561 1562const slides = Array.from({ length: 500 }, (_, index) => \`Slides \${ index + 1 }\`) 1563const swiperEl = ref(null) 1564const prependNumber = ref(1) 1565const appendNumber = ref(500) 1566 1567const toSlide = index => { 1568 swiperEl.value?.swiper.slideTo(index - 1) 1569} 1570 1571const prependSlide = () => { 1572 swiperEl.value?.swiper.prependSlide([
1573 \`<swiper-slide>Slide \${ --prependNumber.value } </swiper-slide>\`, 1574 \`<swiper-slide>Slide \${ --prependNumber.value } </swiper-slide>\`, 1575 ]) 1576} 1577 1578const appendSlide = () => { 1579 swiperEl.value?.swiper.appendSlide([\`<swiper-slide>Slide \${ ++appendNumber.value } </swiper-slide>\`]) 1580} 1581<\/script> 1582 1583<template> 1584 <section class="swiper-virtual"> 1585 <swiper-container 1586 ref="swiperEl" 1587 virtual="true" 1588 :slides="slides" 1589 navigation="true" 1590 slides-per-view="5" 1591 space-between="50" 1592 free-mode="true" 1593 events-prefix="swiper-" 1594 :breakpoints="{ 1595 1024: { 1596 slidesPerView: 4, 1597 spaceBetween: 40, 1598 }, 1599 768: { 1600 slidesPerView: 3, 1601 spaceBetween: 30, 1602 }, 1603 640: { 1604 slidesPerView: 2, 1605 spaceBetween: 20, 1606 }, 1607 320: { 1608 slidesPerView: 1, 1609 spaceBetween: 10, 1610 }, 1611 }" 1612 > 1613 <swiper-slide 1614 v-for="(item, index) in slides" 1615 :key="index" 1616 > 1617 <div class="text-secondary"> 1618 {{ item }} 1619 </div> 1620 </swiper-slide> 1621 </swiper-container> 1622 1623 <div class="d-flex justify-center gap-4 flex-wrap"> 1624 <VBtn 1625 variant="outlined" 1626 color="primary" 1627 @click.prevent="prependSlide" 1628 > 1629 Prepend 2 Slides 1630 </VBtn> 1631 <VBtn 1632 variant="outlined" 1633 color="primary" 1634 @click.prevent="toSlide(1)" 1635 > 1636 Slide 1 1637 </VBtn> 1638 <VBtn 1639 variant="outlined" 1640 color="primary" 1641 @click.prevent="toSlide(250)" 1642 > 1643 Slide 250 1644 </VBtn> 1645 <VBtn 1646 variant="outlined" 1647 color="primary" 1648 @click.prevent="toSlide(500)" 1649 > 1650 Slide 500 1651 </VBtn> 1652 <VBtn 1653 variant="outlined" 1654 color="primary" 1655 @click.prevent="appendSlide" 1656 > 1657 Append Slide 1658 </VBtn> 1659 </div> 1660 </section> 1661</template> 1662 1663<style lang="scss"> 1664.swiper-virtual { 1665 swiper-slide { 1666 display: flex; 1667 align-items: center; 1668 justify-content: center; 1669 background: #eee; 1670 font-size: 18px; 1671 text-align: center; 1672 } 1673 1674 swiper-container { 1675 block-size: 300px; 1676 inline-size: 100%; 1677 margin-block: 20px; 1678 margin-inline: auto; 1679 } 1680} 1681</style> 1682`},Mr={__name:"swiper",setup(c){return(l,o)=>{const i=br,p=le,j=cr,A=or,U=pr,f=nr,a=ir,v=Je,T=Me,ee=Le,re=Ee,ie=Pe,se=Ie,ne=ke,te=_e,pe=fe,ae=be;return s(),oe(we,null,{default:t(()=>[r(d,null,{default:t(()=>[r(p,{title:"Basic",code:fr},{default:t(()=>[r(i)]),_:1},8,["code"])]),_:1}),r(d,null,{default:t(()=>[r(p,{title:"Navigation",code:hr},{default:t(()=>[r(j)]),_:1},8,["code"])]),_:1}),r(d,null,{default:t(()=>[r(p,{title:"Pagination",code:Br},{default:t(()=>[r(A)]),_:1},8,["code"])]),_:1}),r(d,null,{default:t(()=>[r(p,{title:"Progress",code:Pr},{default:t(()=>[r(U)]),_:1},8,["code"])]),_:1}),r(d,null,{default:t(()=>[r(p,{title:"Multiple Slides Per View",code:Ir},{default:t(()=>[r(f)]),_:1},8,["code"])]),_:1}),r(d,null,{default:t(()=>[r(p,{title:"Grid",code:Sr},{default:t(()=>[r(a)]),_:1},8,["code"])]),_:1}),r(d,null,{default:t(()=>[r(p,{variant:"text",title:"Centered Slides Option 1",code:vr},{default:t(()=>[r(v)]),_:1},8,["code"])]),_:1}),r(d,null,{default:t(()=>[r(p,{title:"Centered Slides Option 2",code:_r},{default:t(()=>
1682[r(T)]),_:1},8,["code"])]),_:1}),r(d,null,{default:t(()=>[r(p,{title:"Fade",code:yr},{default:t(()=>[r(ee)]),_:1},8,["code"])]),_:1}),r(d,null,{default:t(()=>[r(p,{title:"Cube Effect",code:xr},{default:t(()=>[r(re)]),_:1},8,["code"])]),_:1}),r(d,null,{default:t(()=>[r(p,{title:"Coverflow Effect",code:jr},{default:t(()=>[r(ie)]),_:1},8,["code"])]),_:1}),r(d,null,{default:t(()=>[r(p,{title:"Autoplay",code:ur},{default:t(()=>[r(se)]),_:1},8,["code"])]),_:1}),r(d,null,{default:t(()=>[r(p,{title:"Gallery",code:kr},{default:t(()=>[r(ne)]),_:1},8,["code"])]),_:1}),r(d,null,{default:t(()=>[r(p,{title:"Lazy Loading",code:Vr},{default:t(()=>[r(te)]),_:1},8,["code"])]),_:1}),r(d,null,{default:t(()=>[r(p,{title:"Responsive Breakpoints",code:$r},{default:t(()=>[r(pe)]),_:1},8,["code"])]),_:1}),r(d,null,{default:t(()=>[r(p,{title:"Virtual Slides",code:Cr},{default:t(()=>[r(ae)]),_:1},8,["code"])]),_:1})]),_:1})}}};export{Mr as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.