通过swiper.js插件实现单边三张图片重叠轮播效果

常见的堆叠轮播效果，基于Swiper 8.4.7版本的创意效果参数effect: 'creative'实现。

HTML代码：

<link rel="stylesheet" type="text/css" href="../css/swiper-bundle.css" media="screen"/> <!--Swiper 8.4.7-->
<script src="../js/swiper-bundle.min.js"></script><!--Swiper 8.4.7-->
<div id="swiperbox">
	<div class="swiper">
		<div class="swiper-wrapper">
			<article class="swiper-slide">
				<div class="info">
					<figure class="figure">
						<a href="#">
							<img class="img" src="../uploadfiles/pic01.jpg"/>
						</a>
					</figure>
					<div class="text">
						<h4 class="title">
							<a href="#">简单javascript代码实现简单的天时分秒倒计时功能效果</a>
						</h4>
						<div class="excerpt">
							常见的活动倒计时效果js代码，实现原理很简单，通过计算结束时间与当前的时间差实现倒计时，然后可以使用setInterval方法实现每隔1000毫秒（即1秒）变动一次剩余时间的动态倒计时效果。
						</div>
						<div class="meta">
							<div class="date">
								<time pubdate="2024-09-02">2024/09/02</time>
							</div>
							<div class="arrow">
								<div class="btn swiper-button-prev"></div>
								<div class="btn swiper-button-next"></div>
							</div>
						</div>
					</div>
				</div>
			</article>			
			<article class="swiper-slide">
				<div class="info">
					<figure class="figure">
						<a href="#">
							<img class="img" src="../uploadfiles/pic01.jpg"/>
						</a>
					</figure>
					<div class="text">
						<h4 class="title">
							<a href="#">简单javascript代码实现简单的天时分秒倒计时功能效果</a>
						</h4>
						<div class="excerpt">
							常见的活动倒计时效果js代码，实现原理很简单，通过计算结束时间与当前的时间差实现倒计时，然后可以使用setInterval方法实现每隔1000毫秒（即1秒）变动一次剩余时间的动态倒计时效果。
						</div>
						<div class="meta">
							<div class="date">
								<time pubdate="2024-09-02">2024/09/02</time>
							</div>
							<div class="arrow">
								<div class="btn swiper-button-prev"></div>
								<div class="btn swiper-button-next"></div>
							</div>
						</div>
					</div>
				</div>
			</article>
			<article class="swiper-slide">
				<div class="info">
					<figure class="figure">
						<a href="#">
							<img class="img" src="../uploadfiles/pic01.jpg"/>
						</a>
					</figure>
					<div class="text">
						<h4 class="title">
							<a href="#">简单javascript代码实现简单的天时分秒倒计时功能效果</a>
						</h4>
						<div class="excerpt">
							常见的活动倒计时效果js代码，实现原理很简单，通过计算结束时间与当前的时间差实现倒计时，然后可以使用setInterval方法实现每隔1000毫秒（即1秒）变动一次剩余时间的动态倒计时效果。
						</div>
						<div class="meta">
							<div class="date">
								<time pubdate="2024-09-02">2024/09/02</time>
							</div>
							<div class="arrow">
								<div class="btn swiper-button-prev"></div>
								<div class="btn swiper-button-next"></div>
							</div>
						</div>
					</div>
				</div>
			</article>
		</div>
	</div>
</div>

CSS代码：

#swiperbox {padding-left:7.8125%;margin-bottom:6.25%;}
#swiperbox .swiper,#swiperbox .swiper-slide{overflow:visible;}
#swiperbox .info{background-color:#fff;position:relative;display:flex; flex-wrap:wrap; align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;box-shadow:0px 0px 0.875em 0px rgba(146,146,146,0.1);}
#swiperbox .figure{width:48.30508475%;z-index:2;}
#swiperbox .figure a{padding-bottom:70.1754386%;}
#swiperbox .text{padding:0 3.89830508%;width:51.69491525%;}
#swiperbox .title{font-size:1.375em;line-height:1.45454545em;margin-bottom:3.86100386%;color:#00aca0;}
#swiperbox .title a{color:#00aca0;}
#swiperbox .title a:hover{text-decoration:underline;}
#swiperbox .excerpt{color:#3f3a39;line-height:1.75em;height:5.25em;-webkit-line-clamp:3;margin-bottom:17.95366795%;text-align:justify;}
#swiperbox .date{line-height:2em;color:#888;font-weight:lighter;}
#swiperbox .meta{display:flex; flex-wrap:wrap; -webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;align-items:center;}
#swiperbox .arrow{display:flex; flex-wrap:wrap; -webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;align-items:center;width:5.25em;position:relative;}
#swiperbox .arrow:before{width:0.125em;height:1em;background-color:#ebebeb;content:'';display:block;position:absolute;left:50%;top:50%;transform:translateX(-50%);margin-top:-0.5em;}
#swiperbox .btn{width:1.625em;height:1em;background:no-repeat center center;background-size:contain;position:static;margin-top:0;}
#swiperbox .btn:after{display:none;}
#swiperbox .swiper-button-prev{background-image:url(../images/prev_01.svg);}
#swiperbox .swiper-button-prev:hover{background-image:url(../images/prev_01_on.svg);}
#swiperbox .swiper-button-next{background-image:url(../images/next_01.svg);}
#swiperbox .swiper-button-next:hover{background-image:url(../images/next_01_on.svg);}

js代码：

var swiperbox = new Swiper('#swiperbox .swiper',{
    slidesPerView: 1,
    loop:true,
    spaceBetween:1,
    loopAdditionalSlides:2,
    navigation: {
        nextEl: '#swiperbox .swiper-button-next',
        prevEl: '#swiperbox .swiper-button-prev',
    },
    effect : 'creative',
    creativeEffect: {
        prev: {
            shadow: false,
            origin: "left center",
            translate: ['-4.237%', 0, 0],
            scale:0.8925,
            opacity:.65
        },
        next: {
            shadow: false,
            origin: "right center",
            translate: [0, 0, 0],
            scale:1,
            opacity:0
        },       
        limitProgress:2,
    },
});