swiper叠加轮播效果（含源码） - 效果图
效果图：
图片素材来源于网络。- 【swiper 源码效果 · 对比地址】
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="statics/swiper/swiper.min.css">
<!-- Demo styles -->
<style>
body {
background: #fff;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
#swiper-container-honor {
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
#swiper-container-honor .swiper-slide {
background-position: center;
background-size: cover;
width: 950px;
height: 300px;
visibility: hidden;
}
#swiper-container-honor .swiper-slide.swiper-slide-prev, #swiper-container-honor .swiper-slide.swiper-slide-next, #swiper-container-honor .swiper-slide.swiper-slide-active{visibility: visible;}
</style>
</head>
<body>
<div class="honor-container" style="width: 1200px;margin: 0 auto;">
<!-- Swiper -->
<div class="swiper-container" id="swiper-container-honor">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(statics/images/nature-1.jpg)"></div>
<div class="swiper-slide" style="background-image:url(statics/images/nature-2.jpg)"></div>
<div class="swiper-slide" style="background-image:url(statics/images/nature-3.jpg)"></div>
<div class="swiper-slide" style="background-image:url(statics/images/nature-4.jpg)"></div>
<div class="swiper-slide" style="background-image:url(statics/images/nature-5.jpg)"></div>
<div class="swiper-slide" style="background-image:url(statics/images/nature-6.jpg)"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swp-pagination-honor"></div>
<!-- Add Arrows -->
<div class="swiper-button-next swp-button-next-honor"></div>
<div class="swiper-button-prev swp-button-prev-honor"></div>
</div>
</div>
<!-- Swiper JS -->
<script src="statics/swiper/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('#swiper-container-honor', {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
coverflowEffect: {
rotate: 0,
stretch: 0,
depth: 500,
modifier: 1,
slideShadows : true,
},
pagination: {
el: '.swp-pagination-honor',
},
navigation: {
nextEl: '.swiper-button-next.swp-button-next-honor',
prevEl: '.swiper-button-prev.swp-button-prev-honor',
},
});
</script>
</body>
</html>
提示：
- 代码仅供学习参考；
- 代码可移植性，匹配性较好。
- 欢迎学习指正。
以上就是关于“ swiper叠加轮播效果 （含源码） - 案例篇” 的全部内容。
