DemoSwiperGallery.vue
1.76 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<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>
<ClientOnly>
<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>
</ClientOnly>
<ClientOnly>
<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>
</ClientOnly>
</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>