基于VUE使用swiper定时无线循环轮播图

基于VUE使用swiper定时无线循环轮播图

1、npm install vue-awesome-swiper@3.1.3 --save

2、全局引入：import VueAwesomeSwiper from ‘vue-awesome-swiper’;
import ‘swiper/dist/css/swiper.css’;
Vue.use(VueAwesomeSwiper);
3、页面中引入：

<swiper :options="swiperOptions" v-if="slider.length">
      		<swiper-slide v-for="(item,index) in slider" :key="index">
        		<img :src="'https://img.jizhisports.com/img/web/' + item.source" />
      		</swiper-slide>
      		<div class="swiper-pagination" slot="pagination">
        	<ul>
          		<li v-for="(item,index) in slider.length" :class="current == index?'color':''" :key='index'></li>
        	</ul>
      		</div>
    	</swiper>

swiperOptions: {
// 循环播放
loop: true,
//自动播放
autoplay: true,
pagination: {
el: ‘.swiper-pagination’,
clickable: false // 是否允许点击小圆点跳转
},
}

遇到的问题：

1、look设置为true，没有出现循环轮播效果。
解决方式：先在swiper标签上判断数组是否有值：v-if="slider.length"。