vue轮播图的使用,无缝滚动遇到的坑
首先介绍vue-swiper的使用:
安装:npm install vue-awesome-swiper --save
main.js引入
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// require styles
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */)
例子如下:
<div class="swiper-container focus-box-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="blockChain-banner">
<div class="content">
<div class="text-wrap" :class="{move: startMove}">
<h3>电子数据保全</h3>
<p>时间精准 权威有效 数据安全</p>
<span class="hoverBtnBg"></span>
<a href="javascript:;">立即体验</a>
</div>
<div class="banner-wrapper">
<div class="banner-layer layer1" :class="{move: startMove}">
<img src="../assets/images/index/indexBanner/banner1-l1.png">
</div>
<div class="banner-layer layer2" :class="{move: startMove}">
<img src="../assets/images/index/indexBanner/banner1-l2.png">
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="blockChain-banner">
<div class="content">
<div class="text-wrap" :class="{move: startMove}">
<h3>在线申请公证</h3>
<p>足不出户 高效体验公证服务 便捷到家</p>
<span class="hoverBtnBg"></span>
<a href="javascript:;" >立即体验</a>
</div>
<div class="banner-wrapper">
<div class="banner-layer layer1" :class="{move: startMove}">
<img src="../assets/images/index/indexBanner/banner2-1.png">
</div>
<div class="banner-layer layer2" :class="{move: startMove}">
<img src="../assets/images/index/indexBanner/banner2-2.png">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
import Swiper from 'swiper';
mounted () {
this.startMove = true; //展示效果
//异步加载
setTimeout(() => {
var mySwiper = new Swiper('.swiper-container', {
autoplay: 5000, //自动播放 5s
loop : true, //无缝循环
pagination: '.swiper-pagination',
paginationClickable: true,
autoplayDisableOnInteraction: false,
})
}, 300);
},