swiper控制页面切换

一般在希望用户执行某个操作之后,才允许页面切换的时候,会有这种需求。比如说要用户点击提交按钮之后,才能滑动到下一个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 的 thumbs 插件来实现缩略图控制切换。 首先,在你的 Nuxt 项目中安装 SwiperSwiper thumbs: ``` npm install swiper --save npm install swiper/dist/js/swiper.min.js --save npm install swiper/dist/css/swiper.min.css --save npm install swiper/dist/js/swiper.min.js --save ``` 然后,在你的页面组件中引入 Swiper: ```js import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css'; ``` 接下来,在 mounted 钩子中初始化 Swiper 和 thumbs: ```js mounted() { const galleryThumbs = new Swiper('.gallery-thumbs', { spaceBetween: 10, slidesPerView: 4, freeMode: true, watchSlidesVisibility: true, watchSlidesProgress: true, }); const galleryTop = new Swiper('.gallery-top', { spaceBetween: 10, thumbs: { swiper: galleryThumbs, }, }); } ``` 在这段代码中,我们使用了两个 Swiper 实例:一个是 `.gallery-thumbs`,用来显示缩略图,另一个是 `.gallery-top`,用来显示大图。我们通过 thumbs 配置选项将两个实例关联起来。 最后,在模板中添加 HTML 和 CSS 代码来显示图片和缩略图: ```html <div class="gallery-top swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="path/to/image1.jpg" alt=""></div> <div class="swiper-slide"><img src="path/to/image2.jpg" alt=""></div> <div class="swiper-slide"><img src="path/to/image3.jpg" alt=""></div> <div class="swiper-slide"><img src="path/to/image4.jpg" alt=""></div> </div> </div> <div class="gallery-thumbs swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="path/to/thumb1.jpg" alt=""></div> <div class="swiper-slide"><img src="path/to/thumb2.jpg" alt=""></div> <div class="swiper-slide"><img src="path/to/thumb3.jpg" alt=""></div> <div class="swiper-slide"><img src="path/to/thumb4.jpg" alt=""></div> </div> </div> ``` ```css .gallery-top, .gallery-thumbs { width: 100%; height: 100%; } .gallery-top .swiper-slide { width: 100%; height: 100%; } .gallery-thumbs .swiper-slide { width: 25%; height: 100%; } ``` 这样,你就可以在 Nuxt 中使用 Swiper thumbs 插件来实现缩略图控制切换了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值