npm i vue-awesome-swiper@3 -S
<template>
<div class="thumb-example">
<!-- swiper1 -->
<swiper class="swiper gallery-top" :options="swiperOptionTop" ref="swiperTop">
<swiper-slide class="slide-1">
<div class="table-cell-container">
<img src="https://dimg04.c-ctrip.com/images/0206c120009m35bnwAC1B_R_600_400_R5_D.jpg"
alt="">
</div>
</swiper-slide>
<swiper-slide class="slide-2">
<div class="table-cell-container">
<img src="https://dimg04.c-ctrip.com/images/0205h120008m1dfqmD3EB_W_1080_808_R5_D.jpg" alt="">
</div>
</swiper-slide>
<swiper-slide class="slide-3">
<div class="table-cell-container">
<img src="https://dimg04.c-ctrip.com/images/0204a12000a9vntarDF44_W_1080_808_R5_D.jpg" alt="">
</div>
</swiper-slide>
<swiper-slide class="slide-4">
<div class="table-cell-container">
<img src="https://bhw.lllomh.com/images/04.jpg" alt="">
</div>
</swiper-slide>
<div class="swiper-button-next swiper-button-white" slot="button-next"></div>
<div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
</swiper>
<!-- swiper2 Thumbs -->
<swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs">
<swiper-slide class="slide-1">
<div class="table-cell-thumbs"><img
src="https://dimg04.c-ctrip.com/images/0206c120009m35bnwAC1B_R_600_400_R5_D.jpg"
alt=""></div>
</swiper-slide>
<swiper-slide class="slide-2">
<div class="table-cell-thumbs"><img
src="https://dimg04.c-ctrip.com/images/0205h120008m1dfqmD3EB_W_1080_808_R5_D.jpg"
alt=""></div>
</swiper-slide>
<swiper-slide class="slide-3">
<div class="table-cell-thumbs"><img
src="https://dimg04.c-ctrip.com/images/0204a12000a9vntarDF44_W_1080_808_R5_D.jpg"
alt=""></div>
</swiper-slide>
<swiper-slide class="slide-4">
<div class="table-cell-thumbs"><img src="https://bhw.lllomh.com/images/04.jpg" alt="">
</div>
</swiper-slide>
</swiper>
</div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
name: 'swiper-example-thumbs-gallery',
title: 'Thumbs gallery with Two-way control',
components: {
swiper,
swiperSlide
},
data() {
return {
swiperOptionTop: {
loop: true,
loopedSlides: 5, // looped slides should be the same
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
},
swiperOptionThumbs: {
loop: true,
loopedSlides: 5, // looped slides should be the same
spaceBetween: 10,
centeredSlides: true,
slidesPerView: 'auto',
touchRatio: 0.2,
slideToClickedSlide: true
}
}
},
mounted() {
this.$nextTick(() => {
const swiperTop = this.$refs.swiperTop.swiper
const swiperThumbs = this.$refs.swiperThumbs.swiper
swiperTop.controller.control = swiperThumbs
swiperThumbs.controller.control = swiperTop
})
}
}
</script>
<style lang="scss" scoped>
.table-cell-thumbs{
display: table-cell;
vertical-align: middle;
text-align: center;
/* 根据需要设置宽度和高度 */
width: 200px;
height: 150px;
/* 仅用于可视化边界 */
}
.table-cell-thumbs img {
/* 如果你需要限制图片大小,可以在这里设置 */
max-width: 100%;
max-height: 100%;
}
.table-cell-container {
display: table-cell;
vertical-align: middle;
text-align: center;
/* 根据需要设置宽度和高度 */
width: 800px;
height: 600px;
/* 仅用于可视化边界 */
}
.table-cell-container img {
/* 如果你需要限制图片大小,可以在这里设置 */
max-width: 100%;
max-height: 100%;
}
.thumb-example {
height: 1000px;
}
.swiper {
.swiper-slide {
background-size: cover;
background-position: center;
}
&.gallery-top {
height: 600px;
width: 800px;
}
&.gallery-thumbs {
height: 150px;
box-sizing: border-box;
padding: 0;
margin-top: 20px;
width: 800px;
}
&.gallery-thumbs .swiper-slide {
width: 200px;
height: 150px;
opacity: 0.4;
}
&.gallery-thumbs .swiper-slide-active {
opacity: 1;
}
}
</style>
```html
在这里插入代码片