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的哦！！！