通过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,
},
});