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>
具體參數可以根據需求自行修改。
![記錄react中使用swiper插件遇到的問題[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)