swiper轮播图多个分页

多个分页"/>

swiper轮播图多个分页

swiper轮播图多个分页

演示效果：

swiper多分页轮播

注意：要引入jQuery和swiper插件，这边用的版本是（Swiper 4.4.2）
效果图：

HTML代码：

<div class="bannerwrap">	<div class="swiper-container bannerswiper"><div class="swiper-wrapper"><div class="swiper-slide centerBig"><div class="box"><img src="img/img07.jpg" class="pcimg" /><div class="b-trext"><p>Spirited Away</p><h3>千与千寻</h3><h4>不管前方的路有多苦，只要走的方向正确，<br>不管多么崎岖不平，都比站在原地更接近幸福。</h4><a href="javascript:;" class="more more01">探索更多</a></div></div></div><div class="swiper-slide"><div class="box"><img src="img/ing0101.jpg" class="pcimg" /><div class="b-trext"><p>My Neighbour Totoro</p><h3>龙猫</h3><h4>人生的某些障碍，你是逃不掉的。<br>与其费尽周折绕过去，不如勇敢的地攀越，或许这会铸就你人生的高点。</h4><a href="javascript:;" class="more more01">探索更多</a></div></div></div><div class="swiper-slide"><div class="box"><img src="img/ing0102.jpg" class="pcimg" /><div class="b-trext"><p>Howl's Moving Castle</p><h3>哈尔的移动城堡</h3><h4>在茫茫人海中相遇相知相守无论谁都不会一帆风顺，<br>只有一颗舍得付出懂得感恩的心才能拥有一生的爱和幸福。</h4><a href="javascript:;" class="more more01">探索更多</a></div></div></div></div></div><div class="botpage"><ul class="text"><li><h3>千与千寻</h3><p>Spirited Away</p></li><li><h3>龙猫</h3><p>My Neighbour Totoro</p></li><li><h3>哈尔的移动城堡</h3><p>Howl's Moving Castle</p></li></ul><div class="page"><div class="swiper-pagination bannercril"></div><div class="swiper-num"><span class="active"></span><strong></strong><span class="total"></span></div></div></div><div class="banner-towrap"><a href="javascript:;" class="banner-to"><strong></strong></a><p>SCROLL DOWN</p></div><div class="in-kong"  id="banner-to"></div>
</div>

css样式：

/* bannerwrap */
.bannerwrap{width: 100%;height: 100%;position: relative;box-sizing: border-box;overflow: hidden;z-index: 1;}.bannerwrap .bannerswiper{width: 100%;height: 100%;}
.bannerwrap .box{position: relative;overflow: hidden;width: 100%;height: 100%;z-index: 0;}
.bannerwrap .box img{display: block;width: 100%;height: 100%;object-fit: cover;}
.centerBig .box img{-webkit-animation-name:centerBig;animation-name:centerBig;}
@-webkit-keyframes centerBig{
100%{transform:scale(1.1,1.1);-webkit-transform:scale(1.1,1.1);}}
@keyframes centerBig{
100%{transform:scale(1.1,1.1);-webkit-transform:scale(1.1,1.1);}}
.swiper-slide .box img{animation-duration:5s;animation-timing-function:linear;animation-fill-mode: forwards;-webkit-animation-duration:5s;-webkit-animation-timing-function:linear;-webkit-animation-fill-mode: forwards;
}
/* botpage */
.botpage{width: 70%;box-sizing: border-box;background-color: #FFFFFF;position: absolute;left: 0;bottom: 0;display: flex;display: -webkit-flex;-webkit-align-items: center;align-items: center;padding: 20px 0;z-index: 1;padding-left: 180px;height: 80px;}
.botpage li{display: none;}
.botpage li:first-child{display: block;}
.botpage .text{margin-right: 140px;}
.botpage .text h3{font-size: 16px;color: #444444;margin-bottom: 10px;}
.botpage .text p{font-size: 12px;color: #aaaaaa;text-transform: uppercase;min-width: 160px;}
.botpage .page{display: flex;display: -webkit-flex;-webkit-align-items: center;align-items: center;}
.botpage .page .bannercril{position: relative;}
.botpage .page .swiper-pagination-bullet{opacity: 1;margin-right: 16px;background-color: #e4e4e4;}
.botpage .page .swiper-pagination-bullet:last-child{margin-right: 0;}
.botpage .page .bannercril .swiper-pagination-bullet-active{background-color: #2e5c72;}
.botpage .page .swiper-num{display: flex;display: -webkit-flex;-webkit-align-items: center;align-items: center;margin-left: 60px;}
.botpage .page .swiper-num span{font-size: 14px;color: #333333;}
.botpage .page .swiper-num strong{display: block;width: 10px;height: 1px;background-color: #333333;margin: 0 10px;}/* i-cont */
.i-cont{width: 86%;}
.b-trext{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);z-index: 2;width: 100%;box-sizing: border-box;padding: 0 180px 80px;;}
.bannerwrap .box:before{content: '';display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;background-color: rgba(78, 50 ,111 ,0.3);z-index: 1;}
.b-trext p{font-size: 16px;text-transform: uppercase;color: #FFFFFF;opacity: 0.66;letter-spacing: 3px;margin-bottom: 30px;}
.b-trext h3{font-size: 58px;color: #FFFFFF;font-weight: bold;letter-spacing: 8px;margin-bottom: 40px;}
.b-trext h4{font-size: 20px;line-height: 30px;color: #FFFFFF;margin-bottom: 50px;}
.b-trext .more{border: none;width: 180px;height: 46px;line-height: 46px;background-color: #2e5c72;border-color: #2e5c72;}
.b-trext .more:hover{color: #2e5c72;}
.bannerwrap .banner-towrap{position: absolute;bottom: 0;left: 75%;z-index: 2;display: flex;display: -webkit-flex;-webkit-align-items: center;align-items: center;height: 80px;}
.bannerwrap .banner-towrap p{font-size: 13px;color: #FFFFFF;text-align: center;margin-left:10px;}
.bannerwrap .banner-to{transition: all 0.2s linear 0s;-webkit-transition: all 0.2s linear 0s;display: block;font-size: 1em;width: 20px;height: 30px;border: 1px solid #FFFFFF;background-color: transparent;border-radius: 2rem;overflow: hidden;z-index: 9;margin: auto;}
.bannerwrap .banner-to strong{ animation: downico 1.5s ease-out infinite;position: relative;display: block;line-height: 30px;width: 3px;height: 5px;background: #FFFFFF;margin:10px auto;}
.in-kong{ position: absolute;width: 100%;height: 100px;display: block;bottom: 0;    z-index: -1;}
@keyframes downico{0%{top: 0;opacity: 1;}35%{top: 40%;opacity: 0;}65%{top: -40%;opacity: 0;}100%{top: 0;opacity: 1;}
}
@-webkit-keyframes downico{0%{top: 0;opacity: 1;}35%{top: 40%;opacity: 0;}65%{top: -40%;opacity: 0;}100%{top: 0;opacity: 1;}
}#banner-to{position: absolute;left: 0;height: 80px;z-index: -2;}

JavaScript：

// banner
var bannerswiper = new Swiper('.bannerswiper', {speed: 1000,effect: 'fade',// loop:true,pagination: {el: '.bannercril',clickable: true,},// navigation: {// 	nextEl: '.swiper-button-next01',// 	prevEl: '.swiper-button-prev01',// },autoplay: {delay: 4000,disableOnInteraction: false,},on: {slideChangeTransitionStart: function() {nextSlide = bannerswiper.slides.eq(bannerswiper.activeIndex);nextSlide.addClass("centerBig");$(".botpage .text li").eq(bannerswiper.activeIndex).fadeIn().siblings().hide();},slideChangeTransitionEnd: function() {prevSlide = bannerswiper.slides[bannerswiper.previousIndex];prevSlide.className = "swiper-slide";},init:function(){console.log(this);var total=this.slides.length;console.log(total);$('.total').text('0'+total);this.emit('transitionEnd');},transitionEnd:function(){console.log(this.realIndex);var tindex=this.realIndex;var index=this.realIndex+1;$(".swiper-num .active").text("0"+index);}},
});