一个简单实用的js插件--Swiper

swiper(swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件,可以用来做轮播和滑动.

• 初始化

  
            
    
      
    
    
  Slide 1
    
  Slide 2
    
  Slide 3
    
      
      
    
      
    
        
    

   

• 基本配置

  var mySwiper = new Swiper ('.swiper-container', {
                     // 滑动方向
                    // horizontal水平
                    // vertical垂直
                direction: 'horizontal',
                // 初始化时候slide的索引(从0开始)
                initialSlide: 1,                
                // 手指松开至slide贴合的时间
                speed:3000,                
                // 设置自动播放的事件间隔
                autoplay: 2000,
                // 可显示数量
                slidesPerView:2,                
                // 滑块居中
                centeredSlides:true,
            })

   

• 触摸设置

  

  简单实用的视频播放插件

  简单实用的视频播放插件

  下载

    var mySwiper = new Swiper ('.swiper-container', {
                direction: 'horizontal',
  
                // 触摸距离与slide滑动距离的比率 
                touchRatio:0.1,
  
                // 无法滑动
                onlyExternal:true,
  
                // 滑块跟随手指进行移动
                followFinger:false,
  
                // 定义longSwipesMs
                longSwipesMs:1000,
  
                longSwipes:false,
  
                shortSwipes:false,
  
                longSwipesRatio:0.5,
  
                touchAngle:10,
            })
  禁止切换和前进后退  
   
   
  Slide 1
    
  Slide 2
   
  Slide 3
   
   
   prev next  分页器      
    
      
    
    
  Slide 1
    
  Slide 2
    
  Slide 3
    
    
    
      
    切换效果  进程  
    
    
  Slide 1
    
  Slide 2
    
  Slide 3
    
    
    按钮    
    

   

• 常用属性和回调

    
    
    
  Slide 1
    
  Slide 2
    
  Slide 3
    
    
    按钮