1700 lines
38 KiB
JavaScript
1700 lines
38 KiB
JavaScript
export const autoplay = { ts: `<script setup lang="ts">
|
|
import { register } from 'swiper/element/bundle'
|
|
import swiper10 from '@images/banner/banner-10.jpg'
|
|
import swiper11 from '@images/banner/banner-11.jpg'
|
|
import swiper20 from '@images/banner/banner-20.jpg'
|
|
import swiper7 from '@images/banner/banner-7.jpg'
|
|
import swiper8 from '@images/banner/banner-8.jpg'
|
|
import swiper9 from '@images/banner/banner-9.jpg'
|
|
|
|
register()
|
|
</script>
|
|
|
|
<template>
|
|
<swiper-container
|
|
pagination="true"
|
|
navigation="true"
|
|
autoplay="true"
|
|
centered-slides="true"
|
|
events-prefix="swiper-"
|
|
>
|
|
<swiper-slide
|
|
v-for="swiperImg in
|
|
[
|
|
swiper7,
|
|
swiper8,
|
|
swiper9,
|
|
swiper10,
|
|
swiper11,
|
|
swiper20,
|
|
]"
|
|
:key="swiperImg"
|
|
>
|
|
<VImg
|
|
:src="swiperImg"
|
|
cover
|
|
/>
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
</template>
|
|
`, js: `<script setup>
|
|
import { register } from 'swiper/element/bundle'
|
|
import swiper10 from '@images/banner/banner-10.jpg'
|
|
import swiper11 from '@images/banner/banner-11.jpg'
|
|
import swiper20 from '@images/banner/banner-20.jpg'
|
|
import swiper7 from '@images/banner/banner-7.jpg'
|
|
import swiper8 from '@images/banner/banner-8.jpg'
|
|
import swiper9 from '@images/banner/banner-9.jpg'
|
|
|
|
register()
|
|
</script>
|
|
|
|
<template>
|
|
<swiper-container
|
|
pagination="true"
|
|
navigation="true"
|
|
autoplay="true"
|
|
centered-slides="true"
|
|
events-prefix="swiper-"
|
|
>
|
|
<swiper-slide
|
|
v-for="swiperImg in
|
|
[
|
|
swiper7,
|
|
swiper8,
|
|
swiper9,
|
|
swiper10,
|
|
swiper11,
|
|
swiper20,
|
|
]"
|
|
:key="swiperImg"
|
|
>
|
|
<VImg
|
|
:src="swiperImg"
|
|
cover
|
|
/>
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
</template>
|
|
` }
|
|
|
|
export const basic = { ts: `<script setup lang="ts">
|
|
import { register } from 'swiper/element/bundle'
|
|
|
|
import swiper1 from '@images/banner/banner-1.jpg'
|
|
import swiper13 from '@images/banner/banner-13.jpg'
|
|
import swiper2 from '@images/banner/banner-2.jpg'
|
|
import swiper4 from '@images/banner/banner-4.jpg'
|
|
import swiper7 from '@images/banner/banner-7.jpg'
|
|
|
|
register()
|
|
</script>
|
|
|
|
<template>
|
|
<swiper-container events-prefix="swiper-">
|
|
<swiper-slide
|
|
v-for="swiperImg in [
|
|
swiper1,
|
|
swiper2,
|
|
swiper4,
|
|
swiper7,
|
|
swiper13,
|
|
]"
|
|
:key="swiperImg"
|
|
>
|
|
<VImg :src="swiperImg" />
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
</template>
|
|
`, js: `<script setup>
|
|
import { register } from 'swiper/element/bundle'
|
|
import swiper1 from '@images/banner/banner-1.jpg'
|
|
import swiper13 from '@images/banner/banner-13.jpg'
|
|
import swiper2 from '@images/banner/banner-2.jpg'
|
|
import swiper4 from '@images/banner/banner-4.jpg'
|
|
import swiper7 from '@images/banner/banner-7.jpg'
|
|
|
|
register()
|
|
</script>
|
|
|
|
<template>
|
|
<swiper-container events-prefix="swiper-">
|
|
<swiper-slide
|
|
v-for="swiperImg in [
|
|
swiper1,
|
|
swiper2,
|
|
swiper4,
|
|
swiper7,
|
|
swiper13,
|
|
]"
|
|
:key="swiperImg"
|
|
>
|
|
<VImg :src="swiperImg" />
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
</template>
|
|
` }
|
|
|
|
export const centeredSlidesOption1 = { ts: `<script setup lang="ts">
|
|
import { register } from 'swiper/element/bundle'
|
|
|
|
register()
|
|
</script>
|
|
|
|
<template>
|
|
<!-- eslint-disable vue/attribute-hyphenation -->
|
|
<div class="swiper-centered-slide">
|
|
<swiper-container
|
|
navigation="true"
|
|
centered-slides="true"
|
|
space-between="30"
|
|
slides-per-view="1"
|
|
events-prefix="swiper-"
|
|
:injectStyles="[
|
|
\`
|
|
.swiper-button-next, .swiper-button-prev{
|
|
background: rgb(var(--v-theme-primary)) !important;
|
|
color: #fff !important;
|
|
padding-inline: 0.45rem !important;
|
|
padding-block: 0.45rem !important;
|
|
inline-size: 1rem !important;
|
|
block-size: 1rem !important;
|
|
border-radius: 50%
|
|
}
|
|
\`,
|
|
]"
|
|
:breakpoints="{
|
|
992: {
|
|
slidesPerView: 4,
|
|
spaceBetween: 30,
|
|
},
|
|
780: {
|
|
slidesPerView: 3,
|
|
spaceBetween: 30,
|
|
},
|
|
460: {
|
|
slidesPerView: 2,
|
|
spaceBetween: 20,
|
|
},
|
|
}"
|
|
>
|
|
<swiper-slide
|
|
v-for="{ icon, text } in [
|
|
{ icon: 'ri-github-fill', text: 'Getting Started' },
|
|
{ icon: 'ri-facebook-circle-line', text: 'Pricing & Plans' },
|
|
{ icon: 'ri-twitter-line', text: 'Sales Question' },
|
|
{ icon: 'ri-instagram-line', text: 'Usage Guidelines' },
|
|
{ icon: 'ri-gitlab-line', text: 'General Guide' },
|
|
]"
|
|
:key="text"
|
|
>
|
|
<VCard>
|
|
<VCardText>
|
|
<div class="d-flex flex-column align-center gap-y-3">
|
|
<VIcon
|
|
:icon="icon"
|
|
size="28"
|
|
/>
|
|
<span class="text-high-emphasis">{{ text }}</span>
|
|
</div>
|
|
</VCardText>
|
|
</VCard>
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
swiper-slide {
|
|
padding-block: 1rem;
|
|
|
|
&.swiper-slide-active {
|
|
.v-card {
|
|
border: 1px solid rgb(var(--v-theme-primary));
|
|
|
|
.v-icon {
|
|
color: rgb(var(--v-theme-primary));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
`, js: `<script setup>
|
|
import { register } from 'swiper/element/bundle'
|
|
|
|
register()
|
|
</script>
|
|
|
|
<template>
|
|
<!-- eslint-disable vue/attribute-hyphenation -->
|
|
<div class="swiper-centered-slide">
|
|
<swiper-container
|
|
navigation="true"
|
|
centered-slides="true"
|
|
space-between="30"
|
|
slides-per-view="1"
|
|
events-prefix="swiper-"
|
|
:injectStyles="[
|
|
\`
|
|
.swiper-button-next, .swiper-button-prev{
|
|
background: rgb(var(--v-theme-primary)) !important;
|
|
color: #fff !important;
|
|
padding-inline: 0.45rem !important;
|
|
padding-block: 0.45rem !important;
|
|
inline-size: 1rem !important;
|
|
block-size: 1rem !important;
|
|
border-radius: 50%
|
|
}
|
|
\`,
|
|
]"
|
|
:breakpoints="{
|
|
992: {
|
|
slidesPerView: 4,
|
|
spaceBetween: 30,
|
|
},
|
|
780: {
|
|
slidesPerView: 3,
|
|
spaceBetween: 30,
|
|
},
|
|
460: {
|
|
slidesPerView: 2,
|
|
spaceBetween: 20,
|
|
},
|
|
}"
|
|
>
|
|
<swiper-slide
|
|
v-for="{ icon, text } in [
|
|
{ icon: 'ri-github-fill', text: 'Getting Started' },
|
|
{ icon: 'ri-facebook-circle-line', text: 'Pricing & Plans' },
|
|
{ icon: 'ri-twitter-line', text: 'Sales Question' },
|
|
{ icon: 'ri-instagram-line', text: 'Usage Guidelines' },
|
|
{ icon: 'ri-gitlab-line', text: 'General Guide' },
|
|
]"
|
|
:key="text"
|
|
>
|
|
<VCard>
|
|
<VCardText>
|
|
<div class="d-flex flex-column align-center gap-y-3">
|
|
<VIcon
|
|
:icon="icon"
|
|
size="28"
|
|
/>
|
|
<span class="text-high-emphasis">{{ text }}</span>
|
|
</div>
|
|
</VCardText>
|
|
</VCard>
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
swiper-slide {
|
|
padding-block: 1rem;
|
|
|
|
&.swiper-slide-active {
|
|
.v-card {
|
|
border: 1px solid rgb(var(--v-theme-primary));
|
|
|
|
.v-icon {
|
|
color: rgb(var(--v-theme-primary));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
` }
|
|
|
|
export const centeredSlidesOption2 = { ts: `<script setup lang="ts">
|
|
import { register } from 'swiper/element/bundle'
|
|
|
|
register()
|
|
</script>
|
|
|
|
<template>
|
|
<swiper-container
|
|
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: 30,
|
|
},
|
|
}"
|
|
>
|
|
<swiper-slide
|
|
v-for="{ icon, text } in [
|
|
{ icon: 'ri-github-fill', text: 'Getting Started' },
|
|
{ icon: 'ri-facebook-circle-line', text: 'Pricing & Plans' },
|
|
{ icon: 'ri-twitter-line', text: 'Sales Question' },
|
|
{ icon: 'ri-instagram-line', text: 'Usage Guidelines' },
|
|
{ icon: 'ri-gitlab-line', text: 'General Guide' },
|
|
]"
|
|
:key="text"
|
|
>
|
|
<VCard class="bg-default">
|
|
<VCardText>
|
|
<div class="d-flex align-center gap-x-3">
|
|
<VIcon
|
|
:icon="icon"
|
|
size="28"
|
|
/>
|
|
<span class="font-weight-medium">{{ text }}</span>
|
|
</div>
|
|
</VCardText>
|
|
</VCard>
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
swiper-slide {
|
|
padding-block: 1rem;
|
|
|
|
&.swiper-slide-active {
|
|
.v-card {
|
|
border: 1px solid rgb(var(--v-theme-primary));
|
|
background: rgb(var(--v-theme-primary));
|
|
color: rgb(var(--v-theme-on-primary));
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
`, js: `<script setup>
|
|
import { register } from 'swiper/element/bundle'
|
|
|
|
register()
|
|
</script>
|
|
|
|
<template>
|
|
<swiper-container
|
|
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: 30,
|
|
},
|
|
}"
|
|
>
|
|
<swiper-slide
|
|
v-for="{ icon, text } in [
|
|
{ icon: 'ri-github-fill', text: 'Getting Started' },
|
|
{ icon: 'ri-facebook-circle-line', text: 'Pricing & Plans' },
|
|
{ icon: 'ri-twitter-line', text: 'Sales Question' },
|
|
{ icon: 'ri-instagram-line', text: 'Usage Guidelines' },
|
|
{ icon: 'ri-gitlab-line', text: 'General Guide' },
|
|
]"
|
|
:key="text"
|
|
>
|
|
<VCard class="bg-default">
|
|
<VCardText>
|
|
<div class="d-flex align-center gap-x-3">
|
|
<VIcon
|
|
:icon="icon"
|
|
size="28"
|
|
/>
|
|
<span class="font-weight-medium">{{ text }}</span>
|
|
</div>
|
|
</VCardText>
|
|
</VCard>
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
swiper-slide {
|
|
padding-block: 1rem;
|
|
|
|
&.swiper-slide-active {
|
|
.v-card {
|
|
border: 1px solid rgb(var(--v-theme-primary));
|
|
background: rgb(var(--v-theme-primary));
|
|
color: rgb(var(--v-theme-on-primary));
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
` }
|
|
|
|
export const coverflowEffect = { ts: `<script setup lang="ts">
|
|
import { register } from 'swiper/element/bundle'
|
|
import swiper31 from '@images/banner/banner-31.jpg'
|
|
import swiper32 from '@images/banner/banner-32.jpg'
|
|
import swiper33 from '@images/banner/banner-33.jpg'
|
|
import swiper34 from '@images/banner/banner-34.jpg'
|
|
import swiper35 from '@images/banner/banner-35.jpg'
|
|
import swiper36 from '@images/banner/banner-36.jpg'
|
|
import swiper37 from '@images/banner/banner-37.jpg'
|
|
import swiper38 from '@images/banner/banner-38.jpg'
|
|
import swiper39 from '@images/banner/banner-39.jpg'
|
|
|
|
register()
|
|
</script>
|
|
|
|
<template>
|
|
<swiper-container
|
|
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-"
|
|
>
|
|
<swiper-slide
|
|
v-for="swiperImg in [
|
|
swiper31,
|
|
swiper32,
|
|
swiper33,
|
|
swiper34,
|
|
swiper35,
|
|
swiper36,
|
|
swiper37,
|
|
swiper38,
|
|
swiper39,
|
|
]"
|
|
:key="swiperImg"
|
|
>
|
|
<VImg :src="swiperImg" />
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
swiper-slide {
|
|
background-position: center;
|
|
background-size: cover;
|
|
block-size: 300px;
|
|
inline-size: 300px;
|
|
}
|
|
</style>
|
|
`, js: `<script setup>
|
|
import { register } from 'swiper/element/bundle'
|
|
import swiper31 from '@images/banner/banner-31.jpg'
|
|
import swiper32 from '@images/banner/banner-32.jpg'
|
|
import swiper33 from '@images/banner/banner-33.jpg'
|
|
import swiper34 from '@images/banner/banner-34.jpg'
|
|
import swiper35 from '@images/banner/banner-35.jpg'
|
|
import swiper36 from '@images/banner/banner-36.jpg'
|
|
import swiper37 from '@images/banner/banner-37.jpg'
|
|
import swiper38 from '@images/banner/banner-38.jpg'
|
|
import swiper39 from '@images/banner/banner-39.jpg'
|
|
|
|
register()
|
|
</script>
|
|
|
|
<template>
|
|
<swiper-container
|
|
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-"
|
|
>
|
|
<swiper-slide
|
|
v-for="swiperImg in [
|
|
swiper31,
|
|
swiper32,
|
|
swiper33,
|
|
swiper34,
|
|
swiper35,
|
|
swiper36,
|
|
swiper37,
|
|
swiper38,
|
|
swiper39,
|
|
]"
|
|
:key="swiperImg"
|
|
>
|
|
<VImg :src="swiperImg" />
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
swiper-slide {
|
|
background-position: center;
|
|
background-size: cover;
|
|
block-size: 300px;
|
|
inline-size: 300px;
|
|
}
|
|
</style>
|
|
` }
|
|
|
|
export const cubeEffect = { ts: `<script setup lang="ts">
|
|
import { register } from 'swiper/element/bundle'
|
|
import swiper21 from '@images/banner/banner-21.jpg'
|
|
import swiper23 from '@images/banner/banner-23.jpg'
|
|
import swiper24 from '@images/banner/banner-24.jpg'
|
|
import swiper32 from '@images/banner/banner-32.jpg'
|
|
|
|
register()
|
|
</script>
|
|
|
|
<template>
|
|
<swiper-container
|
|
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-"
|
|
>
|
|
<swiper-slide
|
|
v-for="swiperImg in [
|
|
swiper21,
|
|
swiper32,
|
|
swiper23,
|
|
swiper24,
|
|
]"
|
|
:key="swiperImg"
|
|
>
|
|
<VImg :src="swiperImg" />
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
swiper-slide {
|
|
background-position: center;
|
|
background-size: cover;
|
|
block-size: 250px;
|
|
inline-size: 250px;
|
|
}
|
|
|
|
swiper-container {
|
|
margin: auto;
|
|
block-size: 250px;
|
|
inline-size: 250px;
|
|
}
|
|
</style>
|
|
`, js: `<script setup>
|
|
import { register } from 'swiper/element/bundle'
|
|
import swiper21 from '@images/banner/banner-21.jpg'
|
|
import swiper23 from '@images/banner/banner-23.jpg'
|
|
import swiper24 from '@images/banner/banner-24.jpg'
|
|
import swiper32 from '@images/banner/banner-32.jpg'
|
|
|
|
register()
|
|
</script>
|
|
|
|
<template>
|
|
<swiper-container
|
|
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-"
|
|
>
|
|
<swiper-slide
|
|
v-for="swiperImg in [
|
|
swiper21,
|
|
swiper32,
|
|
swiper23,
|
|
swiper24,
|
|
]"
|
|
:key="swiperImg"
|
|
>
|
|
<VImg :src="swiperImg" />
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
swiper-slide {
|
|
background-position: center;
|
|
background-size: cover;
|
|
block-size: 250px;
|
|
inline-size: 250px;
|
|
}
|
|
|
|
swiper-container {
|
|
margin: auto;
|
|
block-size: 250px;
|
|
inline-size: 250px;
|
|
}
|
|
</style>
|
|
` }
|
|
|
|
export const fade = { ts: `<script setup lang="ts">
|
|
import { register } from 'swiper/element/bundle'
|
|
import swiper16 from '@images/banner/banner-16.jpg'
|
|
import swiper17 from '@images/banner/banner-17.jpg'
|
|
import swiper18 from '@images/banner/banner-18.jpg'
|
|
import swiper19 from '@images/banner/banner-19.jpg'
|
|
import swiper20 from '@images/banner/banner-20.jpg'
|
|
|
|
register()
|
|
</script>
|
|
|
|
<template>
|
|
<swiper-container
|
|
space-between="30"
|
|
pagination="true"
|
|
navigation="true"
|
|
effect="fade"
|
|
events-prefix="swiper-"
|
|
>
|
|
<swiper-slide
|
|
v-for="swiperImg in [
|
|
swiper20,
|
|
swiper19,
|
|
swiper18,
|
|
swiper17,
|
|
swiper16,
|
|
]"
|
|
:key="swiperImg"
|
|
>
|
|
<VImg :src="swiperImg" />
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
</template>
|
|
`, js: `<script setup>
|
|
import { register } from 'swiper/element/bundle'
|
|
import swiper16 from '@images/banner/banner-16.jpg'
|
|
import swiper17 from '@images/banner/banner-17.jpg'
|
|
import swiper18 from '@images/banner/banner-18.jpg'
|
|
import swiper19 from '@images/banner/banner-19.jpg'
|
|
import swiper20 from '@images/banner/banner-20.jpg'
|
|
|
|
register()
|
|
</script>
|
|
|
|
<template>
|
|
<swiper-container
|
|
space-between="30"
|
|
pagination="true"
|
|
navigation="true"
|
|
effect="fade"
|
|
events-prefix="swiper-"
|
|
>
|
|
<swiper-slide
|
|
v-for="swiperImg in [
|
|
swiper20,
|
|
swiper19,
|
|
swiper18,
|
|
swiper17,
|
|
swiper16,
|
|
]"
|
|
:key="swiperImg"
|
|
>
|
|
<VImg :src="swiperImg" />
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
</template>
|
|
` }
|
|
|
|
export const gallery = { ts: `<script setup lang="ts">
|
|
import { register } from 'swiper/element/bundle'
|
|
|
|
import swiper11 from '@images/banner/banner-11.jpg'
|
|
import swiper12 from '@images/banner/banner-12.jpg'
|
|
import swiper13 from '@images/banner/banner-13.jpg'
|
|
import swiper15 from '@images/banner/banner-15.jpg'
|
|
import swiper16 from '@images/banner/banner-16.jpg'
|
|
|
|
register()
|
|
</script>
|
|
|
|
<template>
|
|
<swiper-container
|
|
class="mySwiper"
|
|
thumbs-swiper=".mySwiper2"
|
|
loop="true"
|
|
space-between="10"
|
|
navigation="true"
|
|
centered-slides="true"
|
|
events-prefix="swiper-"
|
|
>
|
|
<swiper-slide
|
|
v-for="swiperImg in [
|
|
swiper11,
|
|
swiper12,
|
|
swiper13,
|
|
swiper15,
|
|
swiper16,
|
|
swiper11,
|
|
swiper12,
|
|
swiper13,
|
|
|
|
]"
|
|
:key="swiperImg"
|
|
>
|
|
<VImg
|
|
:src="swiperImg"
|
|
cover
|
|
/>
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
|
|
<swiper-container
|
|
class="mySwiper2"
|
|
loop="true"
|
|
free-mode="true"
|
|
events-prefix="swiper-"
|
|
slides-per-view="4"
|
|
>
|
|
<swiper-slide
|
|
v-for="swiperImg in [
|
|
swiper11,
|
|
swiper12,
|
|
swiper13,
|
|
swiper15,
|
|
swiper16,
|
|
swiper11,
|
|
swiper12,
|
|
swiper13,
|
|
]"
|
|
:key="swiperImg"
|
|
>
|
|
<VImg
|
|
:src="swiperImg"
|
|
cover
|
|
/>
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
swiper-container {
|
|
background-color: #000;
|
|
}
|
|
|
|
.mySwiper2 {
|
|
swiper-slide {
|
|
border: 5px solid black;
|
|
block-size: 100%;
|
|
inline-size: 25%;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.swiper-slide-thumb-active {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|
|
`, js: `<script setup>
|
|
import { register } from 'swiper/element/bundle'
|
|
import swiper11 from '@images/banner/banner-11.jpg'
|
|
import swiper12 from '@images/banner/banner-12.jpg'
|
|
import swiper13 from '@images/banner/banner-13.jpg'
|
|
import swiper15 from '@images/banner/banner-15.jpg'
|
|
import swiper16 from '@images/banner/banner-16.jpg'
|
|
|
|
register()
|
|
</script>
|
|
|
|
<template>
|
|
<swiper-container
|
|
class="mySwiper"
|
|
thumbs-swiper=".mySwiper2"
|
|
loop="true"
|
|
space-between="10"
|
|
navigation="true"
|
|
centered-slides="true"
|
|
events-prefix="swiper-"
|
|
>
|
|
<swiper-slide
|
|
v-for="swiperImg in [
|
|
swiper11,
|
|
swiper12,
|
|
swiper13,
|
|
swiper15,
|
|
swiper16,
|
|
swiper11,
|
|
swiper12,
|
|
swiper13,
|
|
|
|
]"
|
|
:key="swiperImg"
|
|
>
|
|
<VImg
|
|
:src="swiperImg"
|
|
cover
|
|
/>
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
|
|
<swiper-container
|
|
class="mySwiper2"
|
|
loop="true"
|
|
free-mode="true"
|
|
events-prefix="swiper-"
|
|
slides-per-view="4"
|
|
>
|
|
<swiper-slide
|
|
v-for="swiperImg in [
|
|
swiper11,
|
|
swiper12,
|
|
swiper13,
|
|
swiper15,
|
|
swiper16,
|
|
swiper11,
|
|
swiper12,
|
|
swiper13,
|
|
]"
|
|
:key="swiperImg"
|
|
>
|
|
<VImg
|
|
:src="swiperImg"
|
|
cover
|
|
/>
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
swiper-container {
|
|
background-color: #000;
|
|
}
|
|
|
|
.mySwiper2 {
|
|
swiper-slide {
|
|
border: 5px solid black;
|
|
block-size: 100%;
|
|
inline-size: 25%;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.swiper-slide-thumb-active {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|
|
` }
|
|
|
|
export const grid = { ts: `<script setup lang="ts">
|
|
import { register } from 'swiper/element/bundle'
|
|
import swiper26 from '@images/banner/banner-26.jpg'
|
|
import swiper28 from '@images/banner/banner-28.jpg'
|
|
import swiper29 from '@images/banner/banner-29.jpg'
|
|
import swiper30 from '@images/banner/banner-30.jpg'
|
|
import swiper31 from '@images/banner/banner-31.jpg'
|
|
import swiper32 from '@images/banner/banner-32.jpg'
|
|
import swiper33 from '@images/banner/banner-33.jpg'
|
|
import swiper34 from '@images/banner/banner-34.jpg'
|
|
import swiper35 from '@images/banner/banner-35.jpg'
|
|
import swiper39 from '@images/banner/banner-39.jpg'
|
|
|
|
register()
|
|
</script>
|
|
|
|
<template>
|
|
<swiper-container
|
|
slides-per-view="4"
|
|
grid-fill="rows"
|
|
space-between="30"
|
|
grid-rows="2"
|
|
pagination-clickable="true"
|
|
events-prefix="swiper-"
|
|
>
|
|
<swiper-slide
|
|
v-for="swiperImg in [
|
|
swiper26,
|
|
swiper39,
|
|
swiper28,
|
|
swiper29,
|
|
swiper30,
|
|
swiper31,
|
|
swiper32,
|
|
swiper33,
|
|
swiper34,
|
|
swiper35,
|
|
swiper26,
|
|
swiper39,
|
|
]"
|
|
:key="swiperImg"
|
|
>
|
|
<VImg :src="swiperImg" />
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
</template>
|
|
`, js: `<script setup>
|
|
import { register } from 'swiper/element/bundle'
|
|
import swiper26 from '@images/banner/banner-26.jpg'
|
|
import swiper28 from '@images/banner/banner-28.jpg'
|
|
import swiper29 from '@images/banner/banner-29.jpg'
|
|
import swiper30 from '@images/banner/banner-30.jpg'
|
|
import swiper31 from '@images/banner/banner-31.jpg'
|
|
import swiper32 from '@images/banner/banner-32.jpg'
|
|
import swiper33 from '@images/banner/banner-33.jpg'
|
|
import swiper34 from '@images/banner/banner-34.jpg'
|
|
import swiper35 from '@images/banner/banner-35.jpg'
|
|
import swiper39 from '@images/banner/banner-39.jpg'
|
|
|
|
register()
|
|
</script>
|
|
|
|
<template>
|
|
<swiper-container
|
|
slides-per-view="4"
|
|
grid-fill="rows"
|
|
space-between="30"
|
|
grid-rows="2"
|
|
pagination-clickable="true"
|
|
events-prefix="swiper-"
|
|
>
|
|
<swiper-slide
|
|
v-for="swiperImg in [
|
|
swiper26,
|
|
swiper39,
|
|
swiper28,
|
|
swiper29,
|
|
swiper30,
|
|
swiper31,
|
|
swiper32,
|
|
swiper33,
|
|
swiper34,
|
|
swiper35,
|
|
swiper26,
|
|
swiper39,
|
|
]"
|
|
:key="swiperImg"
|
|
>
|
|
<VImg :src="swiperImg" />
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
</template>
|
|
` }
|
|
|
|
export const lazyLoading = { ts: `<script setup lang="ts">
|
|
import { register } from 'swiper/element/bundle'
|
|
import swiper20 from '@images/banner/banner-20.jpg'
|
|
import swiper4 from '@images/banner/banner-4.jpg'
|
|
import swiper5 from '@images/banner/banner-5.jpg'
|
|
import swiper7 from '@images/banner/banner-7.jpg'
|
|
import swiper8 from '@images/banner/banner-8.jpg'
|
|
import swiper9 from '@images/banner/banner-9.jpg'
|
|
|
|
register()
|
|
</script>
|
|
|
|
<template>
|
|
<swiper-container
|
|
pagination-clickable="true"
|
|
autoplay="true"
|
|
navigation="true"
|
|
events-prefix="swiper-"
|
|
>
|
|
<swiper-slide
|
|
v-for="swiperImg in [
|
|
swiper4,
|
|
swiper5,
|
|
swiper9,
|
|
swiper7,
|
|
swiper8,
|
|
swiper20,
|
|
]"
|
|
:key="swiperImg"
|
|
lazy="true"
|
|
>
|
|
<VImg
|
|
:src="swiperImg"
|
|
cover
|
|
loading="lazy"
|
|
/>
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
</template>
|
|
`, js: `<script setup>
|
|
import { register } from 'swiper/element/bundle'
|
|
import swiper20 from '@images/banner/banner-20.jpg'
|
|
import swiper4 from '@images/banner/banner-4.jpg'
|
|
import swiper5 from '@images/banner/banner-5.jpg'
|
|
import swiper7 from '@images/banner/banner-7.jpg'
|
|
import swiper8 from '@images/banner/banner-8.jpg'
|
|
import swiper9 from '@images/banner/banner-9.jpg'
|
|
|
|
register()
|
|
</script>
|
|
|
|
<template>
|
|
<swiper-container
|
|
pagination-clickable="true"
|
|
autoplay="true"
|
|
navigation="true"
|
|
events-prefix="swiper-"
|
|
>
|
|
<swiper-slide
|
|
v-for="swiperImg in [
|
|
swiper4,
|
|
swiper5,
|
|
swiper9,
|
|
swiper7,
|
|
swiper8,
|
|
swiper20,
|
|
]"
|
|
:key="swiperImg"
|
|
lazy="true"
|
|
>
|
|
<VImg
|
|
:src="swiperImg"
|
|
cover
|
|
loading="lazy"
|
|
/>
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
</template>
|
|
` }
|
|
|
|
export const multipleSlidesPerView = { ts: `<script setup lang="ts">
|
|
import { register } from 'swiper/element/bundle'
|
|
import swiper31 from '@images/banner/banner-31.jpg'
|
|
import swiper32 from '@images/banner/banner-32.jpg'
|
|
import swiper33 from '@images/banner/banner-33.jpg'
|
|
import swiper34 from '@images/banner/banner-34.jpg'
|
|
import swiper35 from '@images/banner/banner-35.jpg'
|
|
|
|
register()
|
|
</script>
|
|
|
|
<template>
|
|
<swiper-container
|
|
pagination="true"
|
|
slides-per-view="3"
|
|
space-between="25"
|
|
events-prefix="swiper-"
|
|
>
|
|
<swiper-slide
|
|
v-for="swiperImg in [
|
|
swiper31,
|
|
swiper32,
|
|
swiper33,
|
|
swiper34,
|
|
swiper35,
|
|
]"
|
|
:key="swiperImg"
|
|
>
|
|
<VImg :src="swiperImg" />
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
</template>
|
|
`, js: `<script setup>
|
|
import { register } from 'swiper/element/bundle'
|
|
import swiper31 from '@images/banner/banner-31.jpg'
|
|
import swiper32 from '@images/banner/banner-32.jpg'
|
|
import swiper33 from '@images/banner/banner-33.jpg'
|
|
import swiper34 from '@images/banner/banner-34.jpg'
|
|
import swiper35 from '@images/banner/banner-35.jpg'
|
|
|
|
register()
|
|
</script>
|
|
|
|
<template>
|
|
<swiper-container
|
|
pagination="true"
|
|
slides-per-view="3"
|
|
space-between="25"
|
|
events-prefix="swiper-"
|
|
>
|
|
<swiper-slide
|
|
v-for="swiperImg in [
|
|
swiper31,
|
|
swiper32,
|
|
swiper33,
|
|
swiper34,
|
|
swiper35,
|
|
]"
|
|
:key="swiperImg"
|
|
>
|
|
<VImg :src="swiperImg" />
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
</template>
|
|
` }
|
|
|
|
export const navigation = { ts: `<script setup lang="ts">
|
|
import { register } from 'swiper/element/bundle'
|
|
|
|
import swiper14 from '@images/banner/banner-14.jpg'
|
|
import swiper2 from '@images/banner/banner-2.jpg'
|
|
import swiper3 from '@images/banner/banner-3.jpg'
|
|
import swiper4 from '@images/banner/banner-4.jpg'
|
|
import swiper7 from '@images/banner/banner-7.jpg'
|
|
|
|
register()
|
|
</script>
|
|
|
|
<template>
|
|
<swiper-container
|
|
navigation="true"
|
|
events-prefix="swiper-"
|
|
>
|
|
<swiper-slide
|
|
v-for="swiperImg in [
|
|
swiper7,
|
|
swiper4,
|
|
swiper14,
|
|
swiper3,
|
|
swiper2,
|
|
]"
|
|
:key="swiperImg"
|
|
>
|
|
<VImg :src="swiperImg" />
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
</template>
|
|
`, js: `<script setup>
|
|
import { register } from 'swiper/element/bundle'
|
|
import swiper14 from '@images/banner/banner-14.jpg'
|
|
import swiper2 from '@images/banner/banner-2.jpg'
|
|
import swiper3 from '@images/banner/banner-3.jpg'
|
|
import swiper4 from '@images/banner/banner-4.jpg'
|
|
import swiper7 from '@images/banner/banner-7.jpg'
|
|
|
|
register()
|
|
</script>
|
|
|
|
<template>
|
|
<swiper-container
|
|
navigation="true"
|
|
events-prefix="swiper-"
|
|
>
|
|
<swiper-slide
|
|
v-for="swiperImg in [
|
|
swiper7,
|
|
swiper4,
|
|
swiper14,
|
|
swiper3,
|
|
swiper2,
|
|
]"
|
|
:key="swiperImg"
|
|
>
|
|
<VImg :src="swiperImg" />
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
</template>
|
|
` }
|
|
|
|
export const pagination = { ts: `<script setup lang="ts">
|
|
import { register } from 'swiper/element/bundle'
|
|
import swiper8 from '@images/banner/banner-8.jpg'
|
|
import swiper9 from '@images/banner/banner-9.jpg'
|
|
|
|
import swiper12 from '@images/banner/banner-12.jpg'
|
|
import swiper20 from '@images/banner/banner-20.jpg'
|
|
import swiper7 from '@images/banner/banner-7.jpg'
|
|
|
|
register()
|
|
</script>
|
|
|
|
<template>
|
|
<swiper-container
|
|
pagination="true"
|
|
events-prefix="swiper-"
|
|
>
|
|
<swiper-slide
|
|
v-for="swiperImg in [
|
|
swiper12,
|
|
swiper9,
|
|
swiper8,
|
|
swiper7,
|
|
swiper20,
|
|
]"
|
|
:key="swiperImg"
|
|
>
|
|
<VImg :src="swiperImg" />
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
</template>
|
|
`, js: `<script setup>
|
|
import { register } from 'swiper/element/bundle'
|
|
import swiper8 from '@images/banner/banner-8.jpg'
|
|
import swiper9 from '@images/banner/banner-9.jpg'
|
|
import swiper12 from '@images/banner/banner-12.jpg'
|
|
import swiper20 from '@images/banner/banner-20.jpg'
|
|
import swiper7 from '@images/banner/banner-7.jpg'
|
|
|
|
register()
|
|
</script>
|
|
|
|
<template>
|
|
<swiper-container
|
|
pagination="true"
|
|
events-prefix="swiper-"
|
|
>
|
|
<swiper-slide
|
|
v-for="swiperImg in [
|
|
swiper12,
|
|
swiper9,
|
|
swiper8,
|
|
swiper7,
|
|
swiper20,
|
|
]"
|
|
:key="swiperImg"
|
|
>
|
|
<VImg :src="swiperImg" />
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
</template>
|
|
` }
|
|
|
|
export const progress = { ts: `<script setup lang="ts">
|
|
import { register } from 'swiper/element/bundle'
|
|
import swiper5 from '@images/banner/banner-5.jpg'
|
|
import swiper8 from '@images/banner/banner-8.jpg'
|
|
|
|
import swiper20 from '@images/banner/banner-20.jpg'
|
|
import swiper4 from '@images/banner/banner-4.jpg'
|
|
import swiper7 from '@images/banner/banner-7.jpg'
|
|
|
|
register()
|
|
</script>
|
|
|
|
<template>
|
|
<swiper-container
|
|
navigation="true"
|
|
pagination-type="progressbar"
|
|
events-prefix="swiper-"
|
|
>
|
|
<swiper-slide
|
|
v-for="swiperImg in [
|
|
swiper8,
|
|
swiper7,
|
|
swiper20,
|
|
swiper4,
|
|
swiper5,
|
|
]"
|
|
:key="swiperImg"
|
|
>
|
|
<VImg :src="swiperImg" />
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
</template>
|
|
`, js: `<script setup>
|
|
import { register } from 'swiper/element/bundle'
|
|
import swiper5 from '@images/banner/banner-5.jpg'
|
|
import swiper8 from '@images/banner/banner-8.jpg'
|
|
import swiper20 from '@images/banner/banner-20.jpg'
|
|
import swiper4 from '@images/banner/banner-4.jpg'
|
|
import swiper7 from '@images/banner/banner-7.jpg'
|
|
|
|
register()
|
|
</script>
|
|
|
|
<template>
|
|
<swiper-container
|
|
navigation="true"
|
|
pagination-type="progressbar"
|
|
events-prefix="swiper-"
|
|
>
|
|
<swiper-slide
|
|
v-for="swiperImg in [
|
|
swiper8,
|
|
swiper7,
|
|
swiper20,
|
|
swiper4,
|
|
swiper5,
|
|
]"
|
|
:key="swiperImg"
|
|
>
|
|
<VImg :src="swiperImg" />
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
</template>
|
|
` }
|
|
|
|
export const responsiveBreakpoints = { ts: `<script setup lang="ts">
|
|
import { register } from 'swiper/element/bundle'
|
|
import swiper31 from '@images/banner/banner-31.jpg'
|
|
import swiper32 from '@images/banner/banner-32.jpg'
|
|
import swiper33 from '@images/banner/banner-33.jpg'
|
|
import swiper34 from '@images/banner/banner-34.jpg'
|
|
import swiper35 from '@images/banner/banner-35.jpg'
|
|
import swiper36 from '@images/banner/banner-36.jpg'
|
|
import swiper37 from '@images/banner/banner-37.jpg'
|
|
import swiper38 from '@images/banner/banner-38.jpg'
|
|
import swiper39 from '@images/banner/banner-39.jpg'
|
|
|
|
register()
|
|
</script>
|
|
|
|
<template>
|
|
<swiper-container
|
|
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,
|
|
},
|
|
}"
|
|
>
|
|
<swiper-slide
|
|
v-for="swiperImg in [
|
|
swiper31,
|
|
swiper32,
|
|
swiper33,
|
|
swiper34,
|
|
swiper35,
|
|
swiper36,
|
|
swiper37,
|
|
swiper38,
|
|
swiper39,
|
|
]"
|
|
:key="swiperImg"
|
|
>
|
|
<VImg :src="swiperImg" />
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
</template>
|
|
`, js: `<script setup>
|
|
import { register } from 'swiper/element/bundle'
|
|
import swiper31 from '@images/banner/banner-31.jpg'
|
|
import swiper32 from '@images/banner/banner-32.jpg'
|
|
import swiper33 from '@images/banner/banner-33.jpg'
|
|
import swiper34 from '@images/banner/banner-34.jpg'
|
|
import swiper35 from '@images/banner/banner-35.jpg'
|
|
import swiper36 from '@images/banner/banner-36.jpg'
|
|
import swiper37 from '@images/banner/banner-37.jpg'
|
|
import swiper38 from '@images/banner/banner-38.jpg'
|
|
import swiper39 from '@images/banner/banner-39.jpg'
|
|
|
|
register()
|
|
</script>
|
|
|
|
<template>
|
|
<swiper-container
|
|
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,
|
|
},
|
|
}"
|
|
>
|
|
<swiper-slide
|
|
v-for="swiperImg in [
|
|
swiper31,
|
|
swiper32,
|
|
swiper33,
|
|
swiper34,
|
|
swiper35,
|
|
swiper36,
|
|
swiper37,
|
|
swiper38,
|
|
swiper39,
|
|
]"
|
|
:key="swiperImg"
|
|
>
|
|
<VImg :src="swiperImg" />
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
</template>
|
|
` }
|
|
|
|
export const virtualSlides = { ts: `<script setup lang="ts">
|
|
import { register } from 'swiper/element/bundle'
|
|
|
|
register()
|
|
|
|
const slides = Array.from({ length: 500 }, (_, index) => \`Slides \${index + 1}\`)
|
|
const swiperEl = ref<any>(null)
|
|
const prependNumber = ref(1)
|
|
const appendNumber = ref(500)
|
|
|
|
const toSlide = (index: number) => {
|
|
swiperEl.value?.swiper.slideTo(index - 1)
|
|
}
|
|
|
|
const prependSlide = () => {
|
|
swiperEl.value?.swiper.prependSlide([
|
|
\`<swiper-slide>Slide \${(--prependNumber.value)} </swiper-slide>\`,
|
|
\`<swiper-slide>Slide \${(--prependNumber.value)} </swiper-slide>\`,
|
|
])
|
|
}
|
|
|
|
const appendSlide = () => {
|
|
swiperEl.value?.swiper.appendSlide([
|
|
\`<swiper-slide>Slide \${(++appendNumber.value)} </swiper-slide>\`,
|
|
])
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="swiper-virtual">
|
|
<swiper-container
|
|
ref="swiperEl"
|
|
virtual="true"
|
|
:slides="slides"
|
|
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,
|
|
},
|
|
}"
|
|
>
|
|
<swiper-slide
|
|
v-for="(item, index) in slides"
|
|
:key="index"
|
|
>
|
|
{{ item }}
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
|
|
<div class="d-flex justify-center gap-4 flex-wrap">
|
|
<VBtn
|
|
variant="outlined"
|
|
color="primary"
|
|
@click.prevent="prependSlide"
|
|
>
|
|
Prepend 2 Slides
|
|
</VBtn>
|
|
<VBtn
|
|
variant="outlined"
|
|
color="primary"
|
|
@click.prevent="toSlide(1)"
|
|
>
|
|
Slide 1
|
|
</VBtn>
|
|
<VBtn
|
|
variant="outlined"
|
|
color="primary"
|
|
@click.prevent="toSlide(250)"
|
|
>
|
|
Slide 250
|
|
</VBtn>
|
|
<VBtn
|
|
variant="outlined"
|
|
color="primary"
|
|
@click.prevent="toSlide(500)"
|
|
>
|
|
Slide 500
|
|
</VBtn>
|
|
<VBtn
|
|
variant="outlined"
|
|
color="primary"
|
|
@click.prevent="appendSlide"
|
|
>
|
|
Append Slide
|
|
</VBtn>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.swiper-virtual {
|
|
swiper-slide {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #eee;
|
|
font-size: 18px;
|
|
text-align: center;
|
|
}
|
|
|
|
swiper-container {
|
|
block-size: 300px;
|
|
inline-size: 100%;
|
|
margin-block: 20px;
|
|
margin-inline: auto;
|
|
}
|
|
}
|
|
</style>
|
|
`, js: `<script setup>
|
|
import { register } from 'swiper/element/bundle'
|
|
|
|
register()
|
|
|
|
const slides = Array.from({ length: 500 }, (_, index) => \`Slides \${ index + 1 }\`)
|
|
const swiperEl = ref(null)
|
|
const prependNumber = ref(1)
|
|
const appendNumber = ref(500)
|
|
|
|
const toSlide = index => {
|
|
swiperEl.value?.swiper.slideTo(index - 1)
|
|
}
|
|
|
|
const prependSlide = () => {
|
|
swiperEl.value?.swiper.prependSlide([
|
|
\`<swiper-slide>Slide \${ --prependNumber.value } </swiper-slide>\`,
|
|
\`<swiper-slide>Slide \${ --prependNumber.value } </swiper-slide>\`,
|
|
])
|
|
}
|
|
|
|
const appendSlide = () => {
|
|
swiperEl.value?.swiper.appendSlide([\`<swiper-slide>Slide \${ ++appendNumber.value } </swiper-slide>\`])
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="swiper-virtual">
|
|
<swiper-container
|
|
ref="swiperEl"
|
|
virtual="true"
|
|
:slides="slides"
|
|
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,
|
|
},
|
|
}"
|
|
>
|
|
<swiper-slide
|
|
v-for="(item, index) in slides"
|
|
:key="index"
|
|
>
|
|
{{ item }}
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
|
|
<div class="d-flex justify-center gap-4 flex-wrap">
|
|
<VBtn
|
|
variant="outlined"
|
|
color="primary"
|
|
@click.prevent="prependSlide"
|
|
>
|
|
Prepend 2 Slides
|
|
</VBtn>
|
|
<VBtn
|
|
variant="outlined"
|
|
color="primary"
|
|
@click.prevent="toSlide(1)"
|
|
>
|
|
Slide 1
|
|
</VBtn>
|
|
<VBtn
|
|
variant="outlined"
|
|
color="primary"
|
|
@click.prevent="toSlide(250)"
|
|
>
|
|
Slide 250
|
|
</VBtn>
|
|
<VBtn
|
|
variant="outlined"
|
|
color="primary"
|
|
@click.prevent="toSlide(500)"
|
|
>
|
|
Slide 500
|
|
</VBtn>
|
|
<VBtn
|
|
variant="outlined"
|
|
color="primary"
|
|
@click.prevent="appendSlide"
|
|
>
|
|
Append Slide
|
|
</VBtn>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.swiper-virtual {
|
|
swiper-slide {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #eee;
|
|
font-size: 18px;
|
|
text-align: center;
|
|
}
|
|
|
|
swiper-container {
|
|
block-size: 300px;
|
|
inline-size: 100%;
|
|
margin-block: 20px;
|
|
margin-inline: auto;
|
|
}
|
|
}
|
|
</style>
|
|
` }
|
|
|