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 } */)

例子如下：

          

            

              

                

                    

                      
电子数据保全
                      
时间精准   权威有效    数据安全
                      
                      立即体验
                    
                    

                      

                        
                      
                      

                        
                      
                    
                
              
            
            

              

                

                    

                      
在线申请公证
                      
足不出户   高效体验公证服务    便捷到家
                      
                      立即体验
                    
                    

                      

                        
                      
                      

                        
                      
                    
                
              
            
          
          

        



 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);

    },