swiper制作3D效果的轮播图

需要配合使用最新的swiper 4.0 使用.具体效果可自己修改~
css:

    .student-swiper {
        position: relative;
    }
   .student-swiper-container {
        position: relative;
        overflow: hidden;
      }
   .swiper-slide {
        width: 442px;
        text-align: center;
         line-height: 2em;
    }
    .swiper-button-next {
        right: -42px;
    }
    .swiper-button-prev {
        left: -42px;
    }
   .swiper-slide-img {
       height: 276px;
       overflow: hidden;
       background: #fff;
       border: 6px solid #fff;
    }
  img {
       width: 100%;
  }

html:

 

    

        

            
轮播图的标题
            

                

                    

                        

                            
                        
                        
swiper-slide1
                    
                    

                        

                            
                        
                        
swiper-slide2
                    
                    

                        

                            
                        
                        
swiper-slide3
                    
                    

                        

                            
                        
                        
swiper-slide4
                    
                    

                        

                            
                        
                        
swiper-slide5
                    
                
            
            
            

            

 	

js: