一般在希望用户执行某个操作之后,才允许页面切换的时候,会有这种需求。比如说要用户点击提交按钮之后,才能滑动到下一个slide。
swiper有一个noSwiping选项,设为true时,可以在slide上(或其他元素)增加类名’swiper-no-swiping’,使该slide无法滑动。
具体用法:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">slider1</div>
<div class="swiper-slide swiper-no-swiping" id="slide2">
<button id="subBtn">提交</button>
</div>
<div class="swiper-slide">slider3</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/swiper.min.js"></script>
<script language="javascript">
var mySwiper = new Swiper('.swiper-container', {
direction: 'vertical',
noSwiping: true, //设为true,不可滑动。设为false,可滑动。默认false
})
//点击事件
$('#subBtn').click(function() {
mySwiper.noSwiping = false;//修改属性值
$('#slide2').removeClass('swiper-no-swiping');//移除class
})
</script>
更多属性可以在swiper中文网API里面查找。