使用swiper制作拓展效果（跑马灯）

1.swiper简介

Swiper常用于移动端网站的内容触摸滑动

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。

Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！

其中包含的基础效果有很多，性能和效果都是非常好的，

image.png

2.swiper 制作跑马灯

需要配合使用最新的swiper 4.0 使用

    .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%;
        }
    }

 

    

        

            
学员风采
            

                

                    

                        

                            
                        
                        
第01届高电压试验技术培训班
                    
                    

                        

                            
                        
                        
第01届高电压试验技术培训班
                    
                    

                        

                            
                        
                        
第01届高电压试验技术培训班
                    
                    

                        

                            
                        
                        
第01届高电压试验技术培训班
                    
                    

                        

                            
                        
                        
第01届高电压试验技术培训班
                    
                
            
            
            

            

            
        

    

image.png

案例