Swiper Navigation Buttons(前后切换按钮) - mySwiper.navigation.prevEl

获取后退按钮的HTML元素。通过$prevEl获取DOM7。

mySwiper.navigation.prevEl信息

启用版本:
4.0.0

效果演示

鼠标移出隐藏按钮,移入显示按钮

slider1
slider2
slider3
 
 

使用方法示例

从Swiper7开始,容器默认类名由'.swiper-container'变更为'.swiper'。
<script language="javascript"> 
var mySwiper = new Swiper('.swiper',{
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
})
//鼠标移出隐藏按钮,移入显示按钮
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');
}
</script>

<style type="text/css">
.swiper .hide{
  opacity:0;
}
.swiper-button-next,.swiper-button-prev{
  transition:opacity 0.5s;
}
</style>