本文主要是介绍vue-awesome-swiper自动轮播+按钮切换，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
轮播组件使用注意事项，需安装vue-awesome-swiper和swiper
其中vue-awesome-swiper@3、swiper@4，否则会导致一些莫名的错误
第一步，安装插件
npm install --save-dev vue-awesome-swiper@3 swiper@4
第二步，在页面中按需引入
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {name: 'Home',components: {swiper, swiperSlide},data() {return {swiperOption: {slidesPerView: 4, // 个数spaceBetween: 20, // 距离navigation: {prevEl: 'swiper-button-prev', // 后退按钮的css选择器或HTML元素。nextEl: 'swiper-button-next', // 前进按钮的css选择器或HTML元素。},loop: true, // 开启循环模式autoplay: {delay: 3000,disableOnInteraction: false // 当用户滑动图片后继续自动轮播}}}},computed: {swiper() {return this.$refs.mySwiper.swiper}},methods: {prevBtn() {this.swiper.slidePrev()},nextBtn() {this.swiper.slideNext()}}
}
<swiper ref="mySwiper" :options="swiperOption" class="swiperBox" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave"><swiper-slide v-for="(item,index) in 6":key="index">内容</swiper-slide><div slot="button-prev" class="swiper-button-prev" @click="prevBtn"></div><div slot="button-next" class="swiper-button-next" @click="nextBtn"></div>
</swiper>
注意CSS
.swiperBox {position: relative;
}
鼠标移入时停止播放，鼠标移出时继续循环播放
在DOM元素中添加两个事件
<div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" > </div>
/** 鼠标移入 */
onMouseEnter() {this.swiper.autoplay.stop()
},
/** 鼠标移出 */
onMouseLeave() {this.swiper.autoplay.start()
}
这篇关于vue-awesome-swiper自动轮播+按钮切换的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
