swiper使用笔记-禁止某个div或slide左右切换

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