我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线:400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

js插件Swiper有什么用

小编给大家分享一下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      按钮    
      
  • 以上是“js插件Swiper有什么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


    文章名称:js插件Swiper有什么用
    本文地址:http://shouzuofang.com/article/jjocie.html