利用swiper在vue中做轮播图，并改变轮播图的原有箭头、图片等内容
目标：利用swiper在vue中做轮播图，并改变轮播图的原有箭头、图片等内容。
实现效果：1、点击左右箭头可切换图片。
2、点击后图片出现最左侧样式效果，只有被点击的图片有此效果，不被点击恢复默认效果。如点击”帅气偶像“图片，”帅气偶像“图片出现边框和蓝字效果，其余图片均不出现此效果。
3.改变了swiper原有的箭头样式，以及在单纯的轮播图中加入了文字，同时设置了各图片间距及大小等。
实现方法：
template中：
选择帅气偶像
萌萌的小偶像
酷酷帅帅的小偶像
帅气偶像
漂亮偶像
script中：
script的data中：
swiperOption: {
loop: true,
autoplay: false,
// 这个是一个框内能同时显示多个slide的
slidesPerView: 4,
// 显示分页
pagination: {
el: '.swiper-pagination',
clickable: true, //允许分页点击跳转
},
// 设置点击箭头
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
},
pictureDevelopmentState: '',script的methods中：
choooseDevelopment(val) {
this.pictureDevelopmentState = val;
},
script的computed和component中：
components: {
swiper,
swiperSlide,
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
},
},
mounted() {
// current swiper instance
// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
console.log('this is current swiper instance object', this.swiper);
// this.swiper.slideTo(3, 1000, false);
},css样式：
.selectDep {
margin-bottom: 20px;
margin-top: 7px;
position: relative;
.selectDepTitle {
flex-basis: 100px;
justify-content: center;
font-size: 12px;
font-family: Source Han Sans CN, Source Han Sans CN-Regular;
font-weight: 500;
text-align: left;
color: #b0d9ff;
margin-bottom: 9px;
}
.depPicture {
display: flex;
width: 361px;
.picture {
width: 85px;
height: 105px;
background: #697485;
border: 1px solid #3a4046;
display: flex;
flex-direction: column;
color: #ffffff;
font-size: 12px;
font-family: Source Han Sans CN, Source Han Sans CN-Regular;
font-weight: 400;
text-align: center;
}
.pictureChoose {
width: 85px;
height: 105px;
display: flex;
flex-direction: column;
background: radial-gradient(rgba(77, 95, 114, 0.27) 0%, undefined 100%);
border: 1px solid #e7f4ff;
box-shadow: #1a446a 0px 0px 20px inset;
font-size: 12px;
font-family: Source Han Sans CN, Source Han Sans CN-Regular;
font-weight: 400;
text-align: center;
color: #80c3ff;
}
}
.swiper-button-prev {
width: 15px;
height: 20px;
background-image: url('./theme/img/leftArrow.png');
background-size: cover;
position: absolute;
left: 0px;
top: 70%;
}
.swiper-button-next {
width: 15px;
height: 20px;
background-image: url('./theme/img/rightArrow.png');
background-size: cover;
position: absolute;
left: 370px;
top: 70%;
}
.swiper-container {
width: 336px;
position: static;
margin-left: 22px;
}
.swiper-slide
.swiper-slide-duplicate
.swiper-slide-active
.swiper-slide-duplicate-next {
width: 361px;
}
}