概述
今天體驗了一下swiper,真是太強大了,無論是PC端還是移動端,各種輪播滑塊效果隨便實現.美中不足的是,有些實現需要自己想辦法.下面我記錄下我的需求和我的實現,供以后開發時參考,相信對其他人也有用.
這里是swpier.js官網.這里是swiper的官方demo.
需要說明的是,如果要兼容IE,那么必須使用swiper2.x.x,這里是swpier2.js官網
另外下面的實現有很多不可取之處,是我比較早期的版本了.
自己的需求
- 全屏且沒有滑動條
- 點擊鏈接可以跳轉到其它slide.
- 自定義分頁器.
初始demo
這是初始demo代碼,直接復制到html文件中就可以打開了(需要聯網).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.0/css/swiper.min.css">
<!-- Demo styles -->
<style>
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-wrapper{
transition-delay:.3s;
}
.swiper-container {
width: 500px;
height: 300px;
margin: 20px auto;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide:nth-child(2){
background:#3183ff;
color:#fff;}
.swiper-slide p{
transform:translateX(-200px);
opacity:0;
transition:all .4s;}
.ani-slide p{
transform:translateX(0);
opacity:1;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><p>Slide 1</p></div>
<div class="swiper-slide"><p>Slide 2</p></div>
<div class="swiper-slide"><p>Slide 3</p></div>
</div>
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.0/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container',{
direction : 'vertical',
followFinger : false,
speed:800,
mousewheel: true,
pagination : {
el:'.swiper-pagination',
},
on:{
init:function(swiper){
slide=this.slides.eq(0);
slide.addClass('ani-slide');
},
transitionStart: function(){
for(i=0;i<this.slides.length;i++){
slide=this.slides.eq(i);
slide.removeClass('ani-slide');
}
},
transitionEnd: function(){
slide=this.slides.eq(this.activeIndex);
slide.addClass('ani-slide');
},
}
});
</script>
</body>
</html>
實現需求的test文件
需要說明的是,swiper不兼容ie.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.0/css/swiper.min.css">
<!-- Demo styles -->
<style>
::-webkit-scrollbar {display:none}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-wrapper{
transition-delay:.3s;
}
.swiper-container {
width: 100%;
height: 942px;
margin: 20px auto;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide:nth-child(2){
background:#3183ff;
color:#fff;}
.swiper-slide p{
transform:translateX(-200px);
opacity:0;
transition:all .4s;}
.ani-slide p{
transform:translateX(0);
opacity:1;
}
.swiper-pagination-bullet:nth-child(1) {
height: 20px;
width: 30px;
}
.test {
cursor: pointer;
color: blue;
text-decoration: underline;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<p>Slide 1</p>
<div class="test">點我翻到第二頁</div>
</div>
<div class="swiper-slide"><p>Slide 2</p></div>
<div class="swiper-slide"><p>Slide 3</p></div>
</div>
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.0/js/swiper.min.js"></script>
<!-- Jquery -->
<script
src="http://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<!-- Initialize Swiper -->
<script>
$('.test').click(function() {
swiper.slideTo(1, 800, false);
});
var swiper = new Swiper('.swiper-container',{
direction : 'vertical',
followFinger : false,
speed:800,
mousewheel: true,
pagination : {
el:'.swiper-pagination',
},
on:{
init:function(swiper){
slide=this.slides.eq(0);
slide.addClass('ani-slide');
},
transitionStart: function(){
for(i=0;i<this.slides.length;i++){
slide=this.slides.eq(i);
slide.removeClass('ani-slide');
}
},
transitionEnd: function(){
slide=this.slides.eq(this.activeIndex);
slide.addClass('ani-slide');
},
}
});
</script>
</body>
</html>