89 lines
1.6 KiB
Vue
89 lines
1.6 KiB
Vue
<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>
|