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

发布了67 篇原创文章 · 获赞 14 · 访问量 10万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术工厂 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览