JS&&Swiper组件

Swiper组件，存在多行时，往左边滑动，导致右边会出现很多的空白，以下是合理的方法之一：

重要的是：onSetTranslate方法的内容。

resistanceRatio：参数的作用是：始终贴着边框，滑动时不会留空白，但是，多行滑动时，左边是正常的，右边无效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="swiper-container swiper1">
			<div class="swiper-wrapper">
				<div class="swiper-slide  ">a</div>
				<div class="swiper-slide ">b</div>
				<div class="swiper-slide ">c</div>
				<div class="swiper-slide ">d</div>
				<div class="swiper-slide ">e</div>
				<div class="swiper-slide ">f</div>
			</div>
			<div class="swiper-wrapper">
				<div class="swiper-slide  ">a</div>
				<div class="swiper-slide ">b</div>
				<div class="swiper-slide ">c</div>
				<div class="swiper-slide ">d</div>
				<div class="swiper-slide ">e</div>
				<div class="swiper-slide ">f</div>
			</div>
		</div>
	</body>
</html>
<script>
	 $(function () {
		   var swiper1 = new Swiper('.swiper1', {
		             slidesPerView: 3.5,
		             paginationClickable: true,//此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
		             spaceBetween: 20,//slide之间的距离（单位px）。
		             freeMode: false,//默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。
		             loop: false,//是否可循环
		             //resistanceRatio: 0, // 禁用边缘阻力--拖动时始终贴着边
		             onSetTranslate: function (swiper, translate) {
		                 if (swiper.activeIndex >= 5) {  //根据列的数量合理判定
		                     swiper.slideTo(2, 1000, false);//切换到第一个slide，速度为1秒--根据列的数量合理切换
		                     swiper.setWrapperTranslate(-295);//手动设置偏移---根据偏移量合理设置
		                     swiper.lockSwipeToNext();//锁住向右滑动
		                 } else {
		                     swiper.unlockSwipeToNext();//解锁
		                 }
		 
		 
		             }
		         });
	 });
</script>>

 

posted @ 2025-06-06 13:47  小鱼记忆  阅读(23)  评论(0)    收藏  举报