swiper3实现3D覆盖流轮播效果
先上最终呈现的效果图
左右拖拽下面的图片，上面的文案进行切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>swiper</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="swiper-3.4.2.min.css">
</head>
<style>
*{
margin: 0;padding: 0;}
img{
display: block;}
html{
max-width: 750px;margin: auto;padding: 0;font-family: '微软雅黑';font-size: 0.12rem;}
#team{
padding: 0.2rem 0;}
#team .cont .name{
font-size: 0.15rem;color: black;line-height: 0.3rem;margin-top: 0.1rem;}
#team .cont .desc{
font-size: 0.14rem;color: black;line-height: 0.21rem;}
#team .cont .member{
margin-top: 0.2rem;}
#team .cont .member img{
width: 1.57rem;height: 2.33rem;}
#team .cont .member p{
font-size: 0.15rem;color: black;text-align: center;height:0.25rem;background-color: #6D6D6D;width: 1.6rem;line-height: 0.25rem;}
</style>
<body>
<div id="team">
<div class="cont">
<div class="gallery-top-box">
<div class="swiper-container gallery-top">
<div class="swiper-wrapper" style="height:1.5rem;">
<div class="swiper-slide">
<div class="name">园1</div>
<div class="desc">
一个专攻全球豪车漆面漆面保护膜的细节控<br/>
一个专攻全球豪车漆面漆面保护膜的细节控<br/>
一个专攻全球豪车漆面漆面保护膜的细节控<br/>
一个专攻全球豪车漆面漆面保护膜的细节控<br/>
一个专攻全球豪车漆面漆面保护膜的细节控<br/>
</div>
</div>
<div class="swiper-slide">
<div class="name">园2</div>
<div class="desc">
一个专攻全球豪车漆面漆面保护膜的细节控<br/>
一个专攻全球豪车漆面漆面保护膜的细节控<br/>
一个专攻全球豪车漆面漆面保护膜的细节控<br/>
一个专攻全球豪车漆面漆面保护膜的细节控<br/>
一个专攻全球豪车漆面漆面保护膜的细节控<br/>
一个专攻全球豪车漆面漆面保护膜的细节控<br/>
</div>
</div>
<div class="swiper-slide">
<div class="name">园3</div>
<div class="desc">
一个专攻全球豪车漆面漆面保护膜的细节控<br/>
一个专攻全球豪车漆面漆面保护膜的细节控<br/>
一个专攻全球豪车漆面漆面保护膜的细节控<br/>
一个专攻全球豪车漆面漆面保护膜的细节控<br/>
一个专攻全球豪车漆面漆面保护膜的细节控<br/>
一个专攻全球豪车漆面漆面保护膜的细节控<br/>
一个专攻全球豪车漆面漆面保护膜的细节控<br/>
</div>
</div>
</div>
</div>
</div>
<div class="member">
<div class="swiper-container swiper-container-horizontal gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="image/gy.jpg" alt=""><p>1</p></div>
<div class="swiper-slide"><img src="image/gy.jpg" alt=""><p>2</p></div>
<div class="swiper-slide"><img src="image/gy.jpg" alt=""><p>3</p></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</div>
</body>
<script src="jquery-1.10.1.min.js"></script>
<script src="swiper-3.4.2.min.js"></script>
<script>
//页面字体基础设置
var getWidth =$(window).width() >= 750 ? 1 :$(window).width()/ 750;
$('html').css('font-size',200 * getWidth + 'px');
//3D覆盖流
var galleryThumbs = new Swiper('.gallery-thumbs', {
effect : 'coverflow',
slidesPerView: 3,
centeredSlides: true,
loop:true,
coverflow: {
rotate: 3,
stretch: 20,
depth: 10,
modifier: 1,
slideShadows : true
},
pagination : '.swiper-pagination'
});
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
slidesPerView: 1,
loop:true,
loopedSlides: 5, //looped slides should be the same
thumbs: {
swiper: galleryThumbs
}
});
galleryTop.params.control = galleryThumbs;
galleryThumbs.params.control = galleryTop;
</script>
</html>
具体参数可以根据需求自行修改。