最近有一个(VUE)需求实现如下:
可以通过左右箭头按钮实现轮播图,轮播图切换时,下方的缩略图也要对应显示,并且缩略图是可以滚动的(比方说一共有八张图片,但是缩略图展示时一次只能展示五张)。同时点击缩略图时,轮播图也要对应显示。
下面是已完成的效果图。
要完成此需求 首先去查了很多插件。像elementui实现轮播图都很方便,但是不符合我这该死的需求。
索性找到了这个插件,还有一些大佬的文档,解决坑的文档。列在下面。
vue-awesome-swiper | Homepage | Surmon's projects
vue中使用vue-awesome-swiper插件实现缩略图控制轮播图效果(填坑) - 相戀 - 博客园
vue-awesome-swiper缩略图控制循环无效解决方案 - 简书
我是根据第一个链接 的
下方这个效果实现的。于是开始了我的踩坑之道。(放心,后面会附上姐姐搞的完整代码)
坑1:
使用这个插件需要安装两个插件
npm install swiper --save
npm install vue-awesome-swiper@3 --save-dev
这里指定了版本 (有的版本可能有问题)
坑2:
引用组件和css
网上大部分引用css的都已经报错了,下面css是正确的引用方式,引用的是node_moudles里面的
引用组件时 swiper swiperSlide 首字母最好小写
坑3:
centeredSlides: true
如果不设置为true ,联动会有问题。
而如果设置为true了 那么初始页面会比较丑陋,因为是从中间开始布局的 而不是最左面。 为了避免这个问题,只能设置是循环 loop 为true
属于优化的一点: 不想让 控制轮播图的箭头按钮显示在图片上,而是两侧
最后 为了先人种树 后人乘凉 附上代码
<template>
<div class="firstDiv">
<div class="swiper-button-prev" style="position:absolute;background-color:red; width:50px; height:50px;left: 220px;top: 400px" slot="button-next"></div>
<div class="swiper-button-next" style="position:absolute;background-color:red; width:50px; height:50px;left: 1620px;top: 400px" slot="button-next"></div>
<div class="centerDiv">
<div class="thumb-example">
<!-- 大轮播图 -->
<swiper class="swiper gallery-top" :options="swiperOptionTop" ref="swiperTop">
<swiper-slide class="slide-1"></swiper-slide>
<swiper-slide class="slide-2"></swiper-slide>
<swiper-slide class="slide-3"></swiper-slide>
<swiper-slide class="slide-4"></swiper-slide>
<swiper-slide class="slide-5"></swiper-slide>
<swiper-slide class="slide-6"></swiper-slide>
<swiper-slide class="slide-7"></swiper-slide>
<swiper-slide class="slide-8"></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>
<!-- 小缩略图 -->
<swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs">
<swiper-slide class="slide-1"></swiper-slide>
<swiper-slide class="slide-2"></swiper-slide>
<swiper-slide class="slide-3"></swiper-slide>
<swiper-slide class="slide-4"></swiper-slide>
<swiper-slide class="slide-5"></swiper-slide>
<swiper-slide class="slide-6"></swiper-slide>
<swiper-slide class="slide-7"></swiper-slide>
<swiper-slide class="slide-8"></swiper-slide>
</swiper>
</div>
</div>
</div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
//import 'swiper/css/swiper.css'
import 'swiper/swiper-bundle.css'
export default {
name: 'image',
components: {
swiper,
swiperSlide
},
data() {
return {
swiperOptionTop: {
loop: true,
loopedSlides: 8, // looped slides should be the same
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
},
swiperOptionThumbs: {
loop: true,
loopedSlides: 8, // 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
console.log(this.$refs)
swiperTop.controller.control = swiperThumbs
swiperThumbs.controller.control = swiperTop
})
},
}
</script>
<style scoped>
.firstDiv{
width: 1920px;
height: 1080px;
position: relative;
}
.centerDiv{
width: 900px;
height: 800px;
position: absolute;
left:510px;
top:200px;
}
.thumb-example {
height: 580px;
background-color: transparent;
}
.swiper-slide {
background-size: cover;
background-position: center;
}
.slide-1 {
background-image: url('../../../../static/img/dandan/g1.jpg');
}
.slide-2 {
background-image: url('../../../../static/img/dandan/g2.jpg');
}
.slide-3 {
background-image: url('../../../../static/img/dandan/g3.jpg');
}
.slide-4 {
background-image: url('../../../../static/img/dandan/g4.jpg');
}
.slide-5 {
background-image: url('../../../../static/img/dandan/g5.jpg');
}
.slide-6 {
background-image: url('../../../../static/img/dandan/g6.jpg');
}
.slide-7 {
background-image: url('../../../../static/img/dandan/g7.jpg');
}
.slide-8 {
background-image: url('../../../../static/img/dandan/g8.jpg');
}
.gallery-top {
height: 80%;
width: 100%;
}
.gallery-thumbs {
height: 20%;
box-sizing: border-box;
padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
width: 20%;
height: 100%;
opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
opacity: 1;
}
</style>
效果就完成啦
------------------------------------------------------------------------------------------------------------------------------
之前是靠度娘到的一些东西将功能实现出来了,但是有些地方不太明白,后经查阅:
关于 mounted 和 $nextTick 在我的其他博客有详细介绍,这里只说明 mounted只执行一次,$nextTick是指确保在dom渲染后执行。
control的意思是指设置为另外一个Swiper实例开始控制该Swiper。(control_Swiper参数选项)
晓看天色暮看云,
行也思君,
坐也思君