查看官网:Swiper中文网-轮播图幻灯片js插件,H5页面前端开发
步骤一:安装swiper
cnpm install swiper@5 -S
步骤二:创建Carousel.vue组件
<!-- 公用组件,在component中创建-->
<template>
<!--banner轮播-->
<div class="swiper-container" ref="mySwiper">
<div class="swiper-wrapper">
<div
class="swiper-slide"
v-for="(carousel, index) in list"
:key="carousel.id"
>
<img :src="carousel.imgUrl" />
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</template>
<script>
import Swiper from "swiper";
//一定要引入样式(建议在main.js中引)
// import "swiper/css/swiper.css";
export default {
name: "Carousel", //netxTick:在修改数据之后(有数据),循环结束之后(有结构)。调用方法,获取新的DOM
props: ["list"],
watch: {
list: {
immediate: true,
handler(newVal, oldVal) {
this.$nextTick(() => {
var mySwiper = new Swiper(this.$refs.mySwiper, {
// 循环模式选项
loop: true,
// 自动轮播功能
autoplay: true,
// 如果需要分页器
pagination: {
el: ".swiper-pagination",
clickable: "true",
},
// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
});
},
},
},
};
</script>
<style lang="scss" scoped>
</style>
步骤三:在mian.js中引入注册。可全局使用~
import "swiper/css/swiper.css";
import Carousel from '@/components/Carousel.vue'
Vue.component(Carousel.name,Carousel)