1.安装
-
npm install vue-awesome-swiper
-
或者 cnpm inatall vue-awesome-swiper
2.引入
全局引入main.js
-
import vueSwiper from 'vue-awesome-swiper'
- import 'swiper/dist/css/swiper.css' //引入样式
组件引入方式
import { swiper, swiperSlide } from "vue-awesome-swiper";
import ("swiper/dist/css/swiper.css");
components: {
swiper,
swiperSlide
},
我的案例
html
<swiper :options="swiperOption" class='Y_yaoqing' ref="mySwiper">
<swiper-slide v-for="(item,index) in list.poster" :key="'img'+index"><img :src="item.posterPic" alt="" class="" /></swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
js
list: [], //页面所有数据
//轮播设置
swiperOption: {
centeredSlides: true, //选中的图片在中间放大
slidesPerView: 3, //显示的数量
spaceBetween: 10,
//分页器设置
pagination: {
el: '.swiper-pagination',
clickable: true, //此参数设置为true时,点击分页器的指示点分页器会控制Swiper切换。
},
loop: true, //循环
on: {
// 使用es6的箭头函数,使this指向vue对象
slideChange: () => {
// 通过$refs获取对应的swiper对象
let swiper = this.$refs.mySwiper.swiper;
let i = swiper.activeIndex;
console.log(i)
this.selectList = this.list.poster[i];
}
}
},
根据开发需求,需要自定义分页器的样式的话,可以将分页器进行重新定义
pagination: {
el: '.swiper-pagination',
type: 'custom',
autoplayDisableOnInteraction : false,
renderCustom: function (swiper, current, total) {
var paginationHtml = " ";
for (var i = 0; i < total; i++) {
// 判断是不是激活焦点,是的话添加active类,不是就只添加基本样式类
if (i === (current - 1)) {
paginationHtml += '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
}else{
paginationHtml += '<span class="swiper-pagination-customs"></span>';
}
}
return paginationHtml;
},
}
css
.swiper-pagination-custom {
bottom: 5%;
left: 0;
width: 100%;
height: 20px;
/* background-color: red; */
text-align: center;
}
/*自定义分页器的样式,这个你自己想要什么样子自己写*/
.swiper-pagination-customs {
width:10px;
height:4px;
background:rgba(255,205,207,1);
border-radius:2px;
/*width: 12px;
height: 12px;*/
display:inline-block;
margin: 0 3px;
outline: 0;
}
/*自定义分页器激活时的样式表现*/
.swiper-pagination-customs-active {
opacity: 1;
border: 3px solid #8e2829;
background-color: #F8000B;
}
wiper dome地址:https://surmon-china.github.io/vue-awesome-swiper/
wiper 中文网:https://www.swiper.com.cn/