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

• 初始化

            
    
      
    
    
  Slide 1
    
  Slide 2
    
  Slide 3
    
      
      
    
      
    
        
    

• 基本配置

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

• 触摸设置

    var mySwiper = new Swiper (&＃39;.swiper-container&＃39;, {
                direction: &＃39;horizontal&＃39;,
  
                // 触摸距离与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
    
    
    按钮    
    

以上就是一个简单实用的js插件--Swiper的详细内容，更多请关注 第一PHP社区 其它相关文章！