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://cxhlcq.com/article/pgije.html