欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

swiper的前进后退按钮移入显示移出隐藏

程序员文章站 2022-03-18 20:40:10
...

这两天在研究swiper时遇到一个问题,就是鼠标移入轮播图时隐藏前进后退按钮,开始没有看官方文档api自己写了几个方法但是问题多多,然后今天早上一起来无意在官方文档找到了方法肯定是我昨天看的不认真,好了话不多说直接上图与代码
swiper的前进后退按钮移入显示移出隐藏

代码如下:

var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical',
    loop: true,

    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },

    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },    
  })   
  //鼠标覆盖停止自动切换与隐藏前进后退按钮
  mySwiper.el.onmouseover = function(){
  mySwiper.navigation.$nextEl.removeClass('hide');
  mySwiper.navigation.$prevEl.removeClass('hide');
}
  //鼠标覆盖停止自动切换与隐藏前进后退按钮
  mySwiper.el.onmouseout = function(){
  mySwiper.navigation.$nextEl.addClass('hide');
  mySwiper.navigation.$prevEl.addClass('hide');
}

切记千万不要把回调函数写入swiper实例化里面去,之前我看的不认真出过这个问题,如有问题望指出,希望对您有所帮助。