swiper是很强的一个轮播组件,不仅兼容web端还兼容移动端,是很多开发者轮播插件首选的一个组件。
这里记录使用插件中的一些笔记。
1、禁止轮播组件左右切换
使用场景: 当轮播页中存在子页面(弹出层以及二级页面)的时候,有时不希望在这些页面或者div上还能进行滑动操作,影响用户体验。
解决思路:使用插件自带的noSwiping禁止切换的一些方法。
具体方法:分以下情况
- 禁止所有slide滑动
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
slider1
</div>
<div class="swiper-slide swiper-no-swiping">
不可拖动的Slide
</div>
<div class="swiper-slide">
slider3
</div>
</div>
</div>
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
noSwiping : true,
})
</script>
如上所示:只需给不想滑动的slide(即swiper-slide中)增加“swiper-no-swiping”样式就可以阻止改slide滑动
- 禁止某一个div滑动
原理和上一个一样,只需给不想滑动的div层级上添加“swiper-no-swiping”样式即可,如下,给第一个slide的p标签设置不可再该区域拖动滑块
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
slider1
<p class="swiper-no-swiping">不可拖动的文字区域</p>
</div>
<div class="swiper-slide swiper-no-swiping">
不可拖动的Slide
</div>
<div class="swiper-slide">
slider3
</div>
</div>
</div>
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
noSwiping : true,
})
</script>
同样,也可在js中设置达到同样目的,如下,给所有的p标签设置不可滑动的操作
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container',{
noSwiping: true,
noSwipingSelector: 'p',
});
</script>
更多可参考swiper官方api: https://www.swiper.com.cn/api/swiping/415.html