利用swiper在vue中做轮播图，并改变轮播图的原有箭头、图片等内容
作者：互联网
目标：利用swiper在vue中做轮播图，并改变轮播图的原有箭头、图片等内容。
实现效果：1、点击左右箭头可切换图片。
2、点击后图片出现最左侧样式效果，只有被点击的图片有此效果，不被点击恢复默认效果。如点击”帅气偶像“图片，”帅气偶像“图片出现边框和蓝字效果，其余图片均不出现此效果。
3.改变了swiper原有的箭头样式，以及在单纯的轮播图中加入了文字，同时设置了各图片间距及大小等。
实现方法：
template中：
<div class="selectDep">
<div class="selectDepTitle">选择帅气偶像</div>
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide class="depPicture">
<div
class="picture"
@click="choooseDevelopment('1')"
:class="pictureDevelopmentState === '1' ? 'pictureChoose' : ''"
>
<span style="height:78px;line-height:95px">
<img src="./theme/img/pictureOne.png" />
</span>
<span>萌萌的小偶像</span>
</div>
</swiper-slide>
<swiper-slide class="depPicture">
<div
class="picture"
@click="choooseDevelopment('2')"
:class="pictureDevelopmentState === '2' ? 'pictureChoose' : ''"
>
<span style="height:65px;line-height:95px">
<img src="./theme/img/pictureTwo.png" />
</span>
<span style="width:49px;margin:auto">
酷酷帅帅的小偶像
</span>
</div>
</swiper-slide>
<swiper-slide class="depPicture">
<div
class="picture"
@click="choooseDevelopment('3')"
:class="pictureDevelopmentState === '3' ? 'pictureChoose' : ''"
>
<span style="height:78px;line-height:107px">
<img
src="./theme/img/pictureThree.png"
style="width:68px;height:44px"
/>
</span>
<span>帅气偶像</span>
</div>
</swiper-slide>
<swiper-slide class="depPicture">
<div
class="picture"
@click="choooseDevelopment('4')"
:class="pictureDevelopmentState === '4' ? 'pictureChoose' : ''"
>
<span style="height:78px;line-height:122px">
<img src="./theme/img/pictureFour.png" />
</span>
<span>漂亮偶像</span>
</div>
</swiper-slide>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</div>script中：
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';
</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;
}
}标签：flex,vue,轮播,Han,width,background,font,swiper 来源： https://blog.csdn.net/weixin_43312391/article/details/121385441