本文为机构官方的教程  这节课我们介绍swiper页面的多行显示。
 
这节课我们介绍swiper当中的swiper嵌套。
 
这次第一步有些不一样，虽然同样是要搭建swiper页面，但是我们在一个swiper页面当中的slide里面嵌套了一个swiper在里面。

     
              
      
                   
       
        Horizontal Slide 1            
        
                         
         
                              
          
                                   
           
            Vertical Slide 1                        
            
             Vertical Slide 2                        
             
              Vertical Slide 3                        
              
               Vertical Slide 4                        
               
                Vertical Slide 5                                        
                
                                                         
                 
                  Horizontal Slide 3            
                  
                   Horizontal Slide 4                
                           
                   
                        
                   
                  
                 
                
               
              
             
            
           
          
         
        
       
      
     

我们可以看到，这次在swiper的外部容器当中添加了一个类名，swiper-container-h，这个类名其实我们可以随便取一个，作为一个标记，记录我们这个外部容器为哪一个swiper页面的外部容器，我们在初始化的时候是要绑定它的，然后有几个swiper的页面我们就要初始化几次，并且每一个初始化都要绑定到不同的swiper页面的外部容器上面，不然的话我们的页面样式就会错乱，下面进行初始化。

 var swiperH = new Swiper('.swiper-container-h', {        pagination: '.swiper-pagination-h',        paginationClickable: true,        spaceBetween: 50    });    var swiperV = new Swiper('.swiper-container-v', {        pagination: '.swiper-pagination-v',        paginationClickable: true,        direction: 'vertical',        spaceBetween: 50    });

这里因为有俩个swiper页面所以分别初始化了俩次，然后要分别设定每个swiper页面的CSS样式，以及每一个swiper页面当中的属性。注意，绑定的外部容器类名一定部能相同，不然一个页面初始化俩次会造成样式错乱。