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(); })
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。