mySwiper.navigation.prevEl
获取后退按钮的HTML元素。通过$prevEl获取DOM7。
mySwiper.navigation.prevEl信息
- 启用版本:
- 4.0.0
效果演示
鼠标移出隐藏按钮,移入显示按钮
使用方法示例
从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>
转载原创文章请注明:文章转载自:Swiper中文网 [https://www.swiper.com.cn]
本文地址:https://www.swiper.com.cn/api/navigation/303.html