如何在一个页面用多个swiper插件

百度搜索的答案也存在bug,结合别人的经验下面是我自己的总结

html代码：

  
  
        
  
            
Slide 1
		
Slide 2
		
Slide 3
		
Slide 4
                
Slide 5
            
  
        
  
    
  
    
  
        
  
	    
Slide 1
	    
Slide 2
	    
Slide 3
	    
Slide 4
	    
Slide 5
        
  
        
  
    
  

 

js代码：

 

这就是两个不同的swiper插件在一个页面中的使用，重点在于

声明swiper变量时 加一个同级元素加以区别即

var swiper = new Swiper('.swiper1',{});  var swiper2 = new Swiper('.swiper2',{});

然后就是更改pagination的默认值用以区别显示的页面控件

pagination:{el:'.swp1',''},

pagination: {el:'.swp2',''},

这就是基本的修改方式，值得一提的是swiper在使用中不予bootstrap冲突