快速便捷的轮播图vue插件,没有赘述多余介绍,直接上步骤。
组件安装
npm install vue-awesome-swiper --save
组件中引入
import 'swiper/dist/css/swiper.css';
import { swiper,swiperSlide} from 'vue-awesome-swiper';
选项
export default {
name:'banner',
//引入组件
components:{
swiper,
swiperSlide
},
data() {
return {
swiperOption: {
//分页
pagination: {
el: '.swiper-pagination',//绑定元素
clickable: true//分页是否可点击
},
//设置自动播放
autoplay:{
delay: 5000,
},
}
}
}
}
模板结构
<template>
<div class="banner container">
<!-- swiper -->
<swiper :options="swiperOption" >
<swiper-slide>
<img src="@/assets/images/4e96457580744e0484f66c414c2532af.jpg" alt="banner01">
</swiper-slide>
<swiper-slide>
<img src="@/assets/images/f1cc61461e08141debf520be50ab362f.png" alt="banner01">
</swiper-slide>
<swiper-slide>
<img src="@/assets/images/f975876866ad188bdafbbaab6f7bb07c.jpeg" alt="banner01">
</swiper-slide>
<swiper-slide>
<img src="@/assets/images/130e1b36391d9a13ec19d4659abe70a7.png" alt="banner01">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
完整代码显示
<template>
<div class="banner container">
<!-- swiper -->
<swiper :options="swiperOption" >
<swiper-slide>
<img src="@/assets/images/4e96457580744e0484f66c414c2532af.jpg" alt="banner01">
</swiper-slide>
<swiper-slide>
<img src="@/assets/images/f1cc61461e08141debf520be50ab362f.png" alt="banner01">
</swiper-slide>
<swiper-slide>
<img src="@/assets/images/f975876866ad188bdafbbaab6f7bb07c.jpeg" alt="banner01">
</swiper-slide>
<swiper-slide>
<img src="@/assets/images/130e1b36391d9a13ec19d4659abe70a7.png" alt="banner01">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
import 'swiper/dist/css/swiper.css';
import { swiper,swiperSlide} from 'vue-awesome-swiper';
export default {
name:'banner',
components:{
swiper,
swiperSlide
},
data() {
return {
swiperOption: {
pagination: {
el: '.swiper-pagination',
//dynamicBullets: true,
clickable: true
},
autoplay:{
delay: 5000,
},
}
}
}
}
</script>
<style lang="scss" scoped>
.banner{
overflow: hidden;
margin-top: 25px;
img{
width: 100%;
}
}
</style>