swiper2.0_鼠标 mouseenter 时,禁止自动轮播及页面拖动

 

有时候，轮播图不止有图片，还有输入框做一些搜索之类的操作。如下：

but，当如下设置时你会发现，页面一直在轮播，根本无法在input框中输入东西

var mySwiper = new Swiper('.swiperBox .swiper-container',{
    autoplay : 3000,//可选选项，自动滑动
    loop : true,//可选选项，开启循环
    setWrapperSize :true,//自动轮播
    calculateHeight : true,
    calculateWidth : true,
    pagination : '.pagination',
    paginationClickable :true,
    autoplayDisableOnInteraction:true,
    keyboardControl:false,//禁止键盘滑动
})

此时，想到swiper自带的禁止自动轮播  mySwiper.stopAutoplay();    mySwiper.startAutoplay();

// 鼠标放上去停播
$('.swiperBox .swiper-container').mouseenter(function () {
   mySwiper.stopAutoplay();
    //左右按钮隐藏
   $('.swiperBox .swiper-container #btn1').hide();
   $('.swiperBox .swiper-container #btn2').hide();
})
$('.swiperBox .swiper-container').mouseleave(function () {
   mySwiper.startAutoplay();
    //左右按钮显示
   $('.swiperBox .swiper-container #btn1').show();
   $('.swiperBox .swiper-container #btn2').show();
})

but,发现是不会自动轮播了，但是鼠标拖动页面时，自动轮播又开启。（因为该插件是支持拖动轮播的）。

最后想到解决办法，禁止拖动。在swiper中找到了方法：

noSwiping设置为true时，可以在slide上（或其他元素）增加类名'swiper-no-swiping'，使该slide无法拖动，希望文字被选中时可以考虑使用。
该类名可通过noSwipingClass修改。

就有了下面的设置：

// 鼠标放上去停播
$('.swiperBox .swiper-container').mouseenter(function () {
   mySwiper.stopAutoplay();
    //添加类
   $('.swiperBox .swiper-container .swiper-wrapper .swiper-slide').addClass('swiper-no-swiping');
   $('.swiperBox .swiper-container #btn1').hide();
   $('.swiperBox .swiper-container #btn2').hide();
})
$('.swiperBox .swiper-container').mouseleave(function () {
   mySwiper.startAutoplay();
    //删除类
   $('.swiperBox .swiper-container .swiper-wrapper .swiper-slide').removeClass('swiper-no-swiping');
   $('.swiperBox .swiper-container #btn1').show();
   $('.swiperBox .swiper-container #btn2').show();
})

but,,,,

不起作用，

原来，是漏了一句话：noSwiping:true,

因此，添加上这句代码后，果然好使了。

// 轮播图
var mySwiper = new Swiper('.swiperBox .swiper-container',{
    autoplay : 3000,//可选选项，自动滑动
    loop : true,//可选选项，开启循环
    setWrapperSize :true,//自动轮播
    calculateHeight : true,
    calculateWidth : true,
    pagination : '.pagination',
    paginationClickable :true,
    autoplayDisableOnInteraction:true,
    keyboardControl:false,//禁止键盘滑动
    noSwiping:true
})

ps:注意一点,我用的是swiper2.0，但是该方法是swiper3.0的哦！！！