vue swiper 轮播图

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>时间精准&nbsp;&nbsp;&nbsp;权威有效 &nbsp;&nbsp;&nbsp;数据安全</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>足不出户&nbsp;&nbsp;&nbsp;高效体验公证服务 &nbsp;&nbsp;&nbsp;便捷到家</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);

    },