欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

swiper控制页面切换

程序员文章站 2024-03-25 11:49:46
...

一般在希望用户执行某个操作之后,才允许页面切换的时候,会有这种需求。比如说要用户点击提交按钮之后,才能滑动到下一个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里面查找。

相关标签: swiper