swiper横向轮播——阶梯式滚动轮播

最新推荐文章于 2023-05-21 18:16:37 发布

我最帅气257

最新推荐文章于 2023-05-21 18:16:37 发布

阅读量495

点赞数

分类专栏：轮播图文章标签： css3

本文链接：https://blog.csdn.net/weixin_56115652/article/details/129308503

版权

轮播图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

swiper横向轮播——阶梯式滚动轮播

swiper横向轮播——阶梯式滚动轮播代码如下`.

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<link rel="stylesheet" href="./swiper/swiper-bundle.min.css"
	/>
	<style>
	    #certify {
	        position: relative;
	        width: 1200px;
	        margin: 0 auto;
			user-select: none;
	    }
	 
	    #certify .swiper-container {
	        padding-bottom: 60px;
			user-select: none;
	    }
	 
	    #certify  .swiper-slide {
	        width: 520px;
	        height: 408px;
	        background: #fff;
	        box-shadow: 0 8px 30px #ddd;
			user-select: none;
	    }
	    #certify  .swiper-slide img{
	        display:block;
			user-select: none;
	    }
	    #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/wm_button_icon.png) no-repeat;
	        background-position: 0 0;
	        background-size: 100%;
			position: absolute;
			left: 0;
			background: -webkit-linear-gradient(#84af3a, #0cd376,#ccdc34);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
	    }
	 
	    #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/wm_button_icon.png) no-repeat;
	        background-position: 0 -93px;
	        background-size: 100%;
			position: absolute;
			right: 0;
			background: -webkit-linear-gradient(#84af3a, #0cd376,#ccdc34);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			
	    }
	 
	    #certify .swiper-button-next:hover {
	        background-position: 0 -139px;
	        background-size: 100%
	    }
	</style>
</head>
<body>
	<div id="certify">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide"><img src="images/1111%20(1).jpeg" height="100%"  /></div>
					<div class="swiper-slide"><img src="images/1111%20(1).jpg" height="100%" /></div>
					<div class="swiper-slide"><img src="images/1111%20(1).png" height="100%" /></div>
					<div class="swiper-slide"><img src="images/1111%20(2).png" height="100%"/></div>
					<div class="swiper-slide"><img src="images/1111%20(2).jpg" height="100%" /></div>
				</div>
			</div>
			<div class="swiper-pagination"></div>
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>
	</div>
	<script src="./swiper/swiper-bundle.min.js"></script>
	<script>
		var certifySwiper = new Swiper('#certify .swiper-container', {
		watchSlidesProgress: true,
		slidesPerView: 'auto',
		centeredSlides: true,
		loop: true, autoplay: true,
		loopedSlides: 5,
		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 * 260 + 'px';
					scale = 1 - Math.abs(slideProgress) / 5;
					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);
				}

			}
		}

	})
	</script>
</body>
</html>