vue中使用swiper,左右箭头点击没有效果问题及解决
作者：沙门空海
这篇文章主要介绍了vue中使用swiper,左右箭头点击没有效果问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue使用swiper,左右箭头点击没有效果
swiper作为一个开源的前端组件，主要用来做各种页面切换轮播的效果。
在做左右切换效果时，发现点击左右箭头没有效果，原来是需要在左右箭头的页面标签上添加点击事件才行。
代码如下，亲测可用
<swiper ref="mySwiper" :options="swiperOptions">
<swiper-slide><div style="background-color: #5cb85c;height: 100%"><img src="../assets/logo.png" style="height: 100%;width: 100%"></div></swiper-slide>
<swiper-slide><div style="background-color: #5cb85c;height: 100%"><img src="../assets/logo.png" style="height: 100%;width: 100%"></div></swiper-slide>
<swiper-slide><div style="background-color: #5cb85c;height: 100%"><img src="../assets/logo.png" style="height: 100%;width: 100%"></div></swiper-slide>
<swiper-slide><div style="background-color: #5cb85c;height: 100%"><img src="../assets/logo.png" style="height: 100%;width: 100%"></div></swiper-slide>
<swiper-slide><div style="background-color: #5cb85c;height: 100%"><img src="../assets/logo.png" style="height: 100%;width: 100%"></div></swiper-slide>
<swiper-slide><div style="background-color: #5cb85c;height: 100%"><img src="../assets/logo.png" style="height: 100%;width: 100%"></div></swiper-slide>
<!-- Add Pagination -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
<!-- Add Arrows -->
<div class="swiper-button-next" slot="button-next" @click="next"></div>
<div class="swiper-button-prev" slot="button-prev" @click="prev"></div>
data(){
return{
swiperOptions: {
slidesPerView: 3,
slidesPerGroup: 3,
loopFillGroupWithBlank: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
},
}
},
computed:{
swiper() {
return this.$refs.mySwiper.$swiper
}
},
methods:{
prev(){
this.swiper.slidePrev();
},
next(){
this.swiper.slideNext();
},
}swiper插件自定义切换箭头按钮
不知道大家在使用swiper时有没有遇到这样一种需求，话不多说，直接上gif。
也就是需要把左右切换的箭头移到容器的外面，自定义箭头的样式。
给swiper容器再加一个父容器，两个容器之间留下间隙，箭头定位到间隙之间就ok了。
箭头默认是绝对定位的，给父容器一个相对定位，就能够调整箭头位置。此外箭头用的是背景图，改变箭头大小的同时记得改变背景图大小。
上代码。
<style>
.out_container{
width: 280px;
height: 150px;
margin: 100px auto;
position: relative;
outline: 1px solid black;
}
.in_container{
width: 216px;
height: 130px;
margin: 0 auto;
overflow: hidden;
}
.swiper_btn{
width: 20px;
height: 20px;
background-size: contain;
}
</style><body>
<div class="out_container">
<div class="in_container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="" alt=""></div>
<div class="swiper-slide"><img src="" alt=""></div>
<div class="swiper-slide"><img src="" alt=""></div>
</div>
<div class="swiper-button-prev swiper_btn"></div>
<div class="swiper-button-next swiper_btn"></div>
</div>
</div>
</body><script>
var mySwiper = new Swiper('.in_container', {
prevButton: '.swiper-button-prev',
nextButton: '.swiper-button-next',
})
</script>效果如下
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。