vue.js实现轮播图（【Vue轮播插件】常用的vue轮播插件整理）

写在前面：

现成的轮播插件是很方便   
    
    
    ，如果只是对文本类的数据进行轮播就很容易满足需求    
    
    
。但是


     


     


     


，实际开发中 




 




 




，表格中可能还嵌套了自己封装的组件   

   

   

   ，组件中又是通过echarts图表来实现的    


     


     


    。这个时候

     

     

     

，这些vue插件多多少少都会出现bug
  




  




  




，真是令人头疼啊…思前想后  


  


  


  ，还是把最近查到的知识整理一下 
     
     
     
，方便以后查看




 




 




 


。

1. vue-seamless-scroll

1.1 基本介绍 官网：vue-seamless-scroll

【备注】安装   
    
    
    、引入等官网都已经写的很清楚了   

   

   

。 1.2 使用举例 官网的案例就足够了：示例 1.3 踩坑 在循环轮播的时候

   




   




   




，第二轮循环的时候无法加载封装的echarts组件 



 



 



 ，文本可以正常显示                 ，但是echarts组件的位置显示空白     

     

     

   。 结合echarts也无法实现左右轮播




  




  




  

。

2. vue-concise-slider

2.1 基本介绍 官网：vue-concise-slider 2.2 使用举例 同样是官网的案例就够了：示例 2.3 踩坑 可以结合echarts组件


    




    




    




，实现左右


     


     


     


、自动 




 




 




、循环轮播效果
  


  


  


。 无法实现上下的循环轮播














，无法循环     
     
     
  。

3. vue-awesome-swiper

3.1 基本介绍 官网：vue-awesome-swiper

【备注】也有中文网                  ，但是感觉少了点东西


     



     



     



，最好直接看英文的吧 




   




   




   
。 安装   

   

   

   、引入参考这篇文章：

vue中使用swiper插件

3.2 使用举例 官网（Vue2）：示例（适用于Vue2） 3.3 踩坑 在循环轮播的时候














，第二轮循环的时候无法加载封装的echarts组件   
    
    
    ，文本可以正常显示


     


     


     


，但是echarts组件的位置显示空白

 



 



 



。 结合echarts也无法实现左右轮播                。