swiper版本：6.4.5
npm i swiper@6
代码如下
<!-- 新建vue文件内容为：-->
<template>
<!-- Slider main container -->
<div class="swiper-container" ref="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide" v-for="carousel of carouselList"
:key="carousel.id">
<!-- 图片懒加载和swiper一起使用可能会出现一个bug 即渲染出空白图,下面是解决方案 -->
<img :src="carousel.imageUrl" v-if="index==0||index===(carouselList.length-1)">
<img v-lazy.container="carousel.imageUrl" alt="" v-else>
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<!-- <div class="swiper-scrollbar"></div>-->
</div>
</template>
<script>
// 轮播图组件
// import Swiper JS
// Swiper6默认只有核心轮播图功能，其他功能没有
import {Swiper, Pagination, Navigation, Autoplay} from 'swiper';
// import Swiper styles
import 'swiper/swiper-bundle.css';
// 要使用其他功能，需要先加载
Swiper.use([Navigation, Pagination, Autoplay]);
export default {
name: "Carousel",
props: {
// 轮播图数据
carouselList: {
type: Array,
required: true // 必须有
}
},
// 使用侦听器,一旦数据发生变化就触发函数
watch: {
// 侦听该数据
carouselList: {
handler() {
this.$nextTick(() => {
//初始化swiper
this.initSwiper();
});
},
immediate: true // 立即调用
}
},
methods: {
// 初始化swiper函数
initSwiper() {
// 使用 this.$refs.swiper 取代 .swiper-container类名 否则有可能出现轮播出现空白的问题
// 使用 this.$refs.swiper 才能保证轮播图组件使用的自己的swiper,
this.swiper = new Swiper(this.$refs.swiper, {
loop: true, // 无缝轮播
autoplay: { // 自动轮播
delay: 2000, // 轮播间隔时间
disableOnInteraction: false, // 当用户点击下一页时，仍会开启自动轮播
},
pagination: { // 启用分页器 也就是小圆点
el: '.swiper-pagination',
clickable: true // 点击小圆点切换图片
},
navigation: { // 启用前进后退按钮
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
}
})
//鼠标覆盖停止自动切换
this.swiper.el.onmouseover = function () {
this.swiper.autoplay.stop();
}
//鼠标离开开始自动切换
this.swiper.el.onmouseout = function () {
this.swiper.autoplay.start();
}
}
},
}
</script>
组件中使用轮播图组件
// 路径别名 在vue.config.js中配置
// 局部使用
import Carousel from "@comps/Carousel";
components:{
// 注册组件
Carousel
}
// 全局注册组件在main.js中
Vue.component('Carousel', Carousel)
// 在要使用轮播图的组件中直接使用<Carousel/>
// 使用
<div>
// carouselList=轮播图数据
<Carousel :carouselList = "floor.carouselList" />
</div>
