swiper触摸滑动失效的解决方法-创新互联

概念

为洪湖等地区用户提供了全套网页设计制作服务,及洪湖网站建设行业解决方案。主营业务为网站设计制作、网站建设、洪湖网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

Swiper 是移动端使用的触摸滑动的一个开源lib,可应用于移动网站,web App,native App或者混合类app。

它专为ios设计,但是也支持Android,Windows Phone8,以及桌面浏览器。Swiper 不兼容所有平台,它是为比较新的触摸设计,只在最新的浏览器上有最好的体验。

解决方法:

   var mySwiper = new Swiper('.swiper-container', {
     autoplay: {
       disableOnInteraction: false,
       delay: 2500,
     },
     preventLinksPropagation: false,  // 阻止点击事件冒泡
     speed: 500,
     loop: true,
     // 如果需要分页器
     pagination: {
       el: '.swiper-pagination',
     },
       // 如果需要前进后退按钮
     navigation: {
     nextEl: '.swiper-button-next',
     prevEl: '.swiper-button-prev',
     },
     onSlideChangeEnd: function (swiper) { // pagination BUG
       var activeIndex = swiper.activeIndex;
       $('.swiper-pagination')
         .find('span')
         .eq(activeIndex)
         .addClass('swiper-pagination-bullet-active')
         .siblings()
         .removeClass('swiper-pagination-bullet-active');
     }
   });
   // 鼠标移入停止自动滚动
   $('.swiper-slide').mouseenter(function() {
     mySwiper.autoplay.stop();
   })
   // 鼠标移出开始自动滚动
   $('.swiper-slide').mouseleave(function() {
     mySwiper.autoplay.start();
   })

另外有需要云服务器可以了解下创新互联cdcxhl.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


当前题目:swiper触摸滑动失效的解决方法-创新互联
路径分享:http://azwzsj.com/article/pgije.html