swiper层叠滑动轮播

最新推荐文章于 2024-05-06 16:10:32 发布

queena~不一样的烟火

最新推荐文章于 2024-05-06 16:10:32 发布

阅读量3.4k

点赞数 2

分类专栏： web前端学习总结文章标签： css javascript

本文链接：https://blog.csdn.net/liuminyi1987/article/details/107818711

版权

web前端学习总结专栏收录该内容

16 篇文章 2 订阅

订阅专栏

轮播效果如下：

HTML代码：

<div id="certify">
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide"><img src="../../../../../Public/Home/images/certify01.png" /></div>
			<div class="swiper-slide"><img src="../../../../../Public/Home/images/certify02.png" /></div>
			<div class="swiper-slide"><img src="../../../../../Public/Home/images/certify03.png" /></div>
			<div class="swiper-slide"><img src="../../../../../Public/Home/images/certify04.png" /></div>
			<div class="swiper-slide"><img src="../../../../../Public/Home/images/certify05.png" /></div>
			<div class="swiper-slide"><img src="../../../../../Public/Home/images/certify06.png" /></div>
						</div>
					</div>
		<div class="swiper-pagination"></div>    <!-- 分页器 -->
		<div class="swiper-button-prev"></div>    <!-- 上一个 -->
		<div class="swiper-button-next"></div>    <!-- 下一个 -->
</div>

js代码，注意这是swiper5.4.5版本，swiper3.4.3版本写法下面会列出来，静止状态下看着一样，但是达不到一张张连续切换的效果，用户体验有些差，感兴趣童鞋可以试一下。

<script src="__JS__/swiper5.4.5.min.js"></script>
var certifySwiper = new Swiper('#certify .swiper-container', {
			watchSlidesProgress: true,
			slidesPerView: 'auto',
			centeredSlides: true,
			loop: true, 
			loopedSlides: 6,
			autoplay: true,
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},
			pagination: {
				el: '.swiper-pagination',
				//clickable :true,
			},
			on:{
			progress: function (progress) {
					for (i = 0; i < this.slides.length; i++) {
						var slide = this.slides.eq(i);
						var slideProgress = this.slides[i].progress;
						modify = 1;
						if (Math.abs(slideProgress) > 1) {
							modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
						}
						translate = slideProgress * modify * 217 + 'px';
						scale = 1 - Math.abs(slideProgress) / 6;
						zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
						slide.transform('translateX(' + translate + ') scale(' + scale + ')');
						slide.css('zIndex', zIndex);
						slide.css('opacity', 1);
						if (Math.abs(slideProgress) > 3) {
							slide.css('opacity', 0);
						}
					}
				},
				setTransition: function (transition) {
					for (var i = 0; i < this.slides.length; i++) {
						var slide = this.slides.eq(i)
						slide.transition(transition);
					}
 
				}
			}
 
		})

swiper3.4.3版本写法如下：

<script src="__JS__/swiper3.4.3.min.js"></script>
var certifySwiper = new Swiper('#certify .swiper-container', {
			watchSlidesProgress: true,
			slidesPerView: 'auto',
			centeredSlides: true,
			loop: true, 
			loopedSlides: 6,
			autoplay: true,
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},
			pagination: {
				el: '.swiper-pagination',
				//clickable :true,
			},
			
			onProgress: function (swiper，progress) {
					for (i = 0; i < swiper.slides.length; i++) {
						var slide = swiper.slides.eq(i);
						var slideProgress = swiper.slides[i].progress;
						modify = 1;
						if (Math.abs(slideProgress) > 1) {
							modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
						}
						translate = slideProgress * modify * 217 + 'px';
						scale = 1 - Math.abs(slideProgress) / 6;
						zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
						slide.transform('translateX(' + translate + ') scale(' + scale + ')');
						slide.css('zIndex', zIndex);
						slide.css('opacity', 1);
						if (Math.abs(slideProgress) > 3) {
							slide.css('opacity', 0);
						}
					}
				},
				onsetTransition: function (swiper,transition) {
					for (var i = 0; i < swiper.slides.length; i++) {
						var slide = swiper.slides.eq(i)
						slide.transition(transition);
					}
 
				}
			
 
		})

CSS代码如下：

#certify {
	position: relative;
	width: 1000px;
	margin: 0 auto
}

#certify .swiper-container {
	padding-bottom: 60px;
}

#certify  .swiper-slide {
	width: 434px;
	height: 293px;
	background: #fff;
	box-shadow: 0 8px 30px #ddd;
}
#certify  .swiper-slide img{
	display:block;
}
#certify  .swiper-slide p {
	line-height: 98px;
	padding-top: 0;
	text-align: center;
	color: #636363;
	font-size: 1.1em;
	margin: 0;
}

#certify .swiper-pagination {
	width: 100%;
	bottom: 20px;
}

#certify .swiper-pagination-bullets .swiper-pagination-bullet {
	margin: 0 5px;
	border: 3px solid #fff;
	background-color: #d5d5d5;
	width: 10px;
	height: 10px;
	opacity: 1;
}

#certify .swiper-pagination-bullets .swiper-pagination-bullet-active {
	border: 3px solid #00aadc;
	background-color: #fff;
}

#certify .swiper-button-prev {
	left: -30px;
	width: 45px;
	height: 45px;
	background: url(../images/Arrowleft.png) no-repeat;
	background-position: 0 0;
	background-size: 100%;
}

#certify .swiper-button-prev:hover {
	/* background-position: 0 -46px; */
	background-size: 100%
}

#certify .swiper-button-next {
	right: -30px;
	width: 45px;
	height: 45px;
	background: url(../images/Arrowright.png) no-repeat;
	/* background-position: 0 -93px; */
	background-size: 100%;
}

#certify .swiper-button-next:hover {
	/* background-position: 0 -139px; */
	background-size: 100%
}