需求：
要求是总共5张图片组成一个轮播，索引的第3张层级最高，第2和4张其次，第1和5张层级在最后。支持左右翻页，并且无论怎么翻都保持当前第3张在最前面的效果。如图所示：
思路
最开始我在 swiper官网 www.swiper.com.cn/ 寻找示例，在 「Swiper 精彩应用（pc）」 看到了和我的需求一样的实例
可是当我点击「下载」 的时候发现要注册登录，新版本还要付钱！太麻烦了~
我决定自己思考该怎么实现这种效果 🤦🏻♀️🤦🏻♀️
于是又翻到了 www.swiper.com.cn/demo/slides… 这个实例，并从中找到了灵感。
当我仔细阅读实例代码发现，swiper低于每一张都有一个单独的class类名 ，例如当前选中的这一张会添加一个 swiper-slide-active，上一张 swiper-slide-prev,下一张 swiper-slide-next
于是就发现，我可以利用这三个类名，给她添加一个放大的样式，那是不是就实现了呢？
.swiper-slide-active,
.swiper-slide-duplicate-active{
transform: scale(1.425) !important;
}
.swiper-slide-prev,
.swiper-slide-next{
transform: scale(1.2) !important;
}
于是便得到了这样的效果：
再设置一下层级和透明度：
.swiper-container .swiper-wrapper .swiper-slide{
width: 220px !important;
height: 400px !important;
opacity: 0.5;
}
.swiper-slide-active,
.swiper-slide-duplicate-active{
transform: scale(1.425) !important;
z-index: 3;
opacity: 1 !important;
}
.swiper-slide-prev,
.swiper-slide-next{
transform: scale(1.2) !important;
z-index: 2;
opacity: 0.75 !important;
}
这样看着就很舒服了~~ nice~
有个小问题，就是切换的时候层级变换看着特别僵硬，再加上一个层级变化的过渡动画，下面完整代码展示！！
<div class="swiper-container feature-swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<!-- 1 -->
<img src="/images/pc/section02/feature1.webp" alt="">
</div>
<div class="swiper-slide">
<!-- 2 -->
<img src="/images/pc/section02/feature2.webp" alt="">
</div>
<div class="swiper-slide">
<!-- 3 -->
<img src="/images/pc/section02/feature3.webp" alt="">
</div>
<div class="swiper-slide">
<!-- 4 -->
<img src="/images/pc/section02/feature4.webp" alt="">
</div>
<div class="swiper-slide">
<!-- 5 -->
<img src="/images/pc/section02/feature5.webp" alt="">
</div>
</div>
<!-- 按钮 -->
<!-- <div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div> -->
</div>
.swiper-container{
overflow: hidden;
width: 1100px;
margin: 0 auto;
margin-top: 70px;
}
.swiper-container .swiper-wrapper{
height: 570px;
align-items: center;
}
.swiper-container .swiper-wrapper .swiper-slide{
width: 220px !important;
height: 400px !important;
opacity: 0.5;
}
.swiper-slide-active,
.swiper-slide-duplicate-active{
transform: scale(1.425) !important;
z-index: 3;
transition: transform 0.5s ease;
opacity: 1 !important;
}
.swiper-slide-prev,
.swiper-slide-next{
transform: scale(1.2) !important;
z-index: 2;
transition: transform 0.5s ease;
opacity: 0.75 !important;
}
var featureSwiper = new Swiper('.feature-swiper-container', {
slidesPerView: 5,
spaceBetween: 0,
centeredSlides: true,
loop: true,
initialSlide: 2,
// navigation: {
// nextEl: ".swiper-button-next",
// prevEl: ".swiper-button-prev",
// },
});
总结
实现这种效果很简单，只要认真阅读示例代码，发现很多需求效果都是可以实现的，包括官网也有很多基础示例。在实际的开发中可以利用样式覆盖等方式实现定制化。
如果您有更好的实现方法，可以分享给我学习一下 😯 🙏🏻🙏🏻🙏🏻
