swiper插件非常好用,其实swiper官网上面的资料非常齐全,只是刚好项目用到,就来写一写,加深理解。
首先引入js和css,
<link rel="stylesheet" href="libs/swiper/swiper-4.2.2.min.css">
<script src="libs/swiper/swiper-4.2.2.min.js"></script>
html:
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide bg-full" style="background:url(images/banner1.png)"> <div class="wrapper width-keep"> <img src="images/quotation1.png" alt=""> <span class="wrapper-words">珍藏·最美的时光</span> <img src="images/quotation2.png" alt=""> </div> <p>全家人的共享空间,承载着父母的期待,孩子的成长变化</p> <p>美好点滴,即时分享</p> <div class="wrapper-button"> <a href="#"><img src="images/load.png" alt=""></a> </div> </div> <div class="swiper-slide bg-full" style="background:url(images/banner1.png)"></div> <div class="swiper-slide bg-full" style="background:url(images/banner1.png)"></div> <div class="swiper-slide bg-full" style="background:url(images/banner1.png)"></div> <div class="swiper-slide bg-full" style="background:url(images/banner1.png)"></div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> </div>
项目的需求是只需要分页器,而且是渐变效果的(js中写),如果你需要按钮可以参考swiper官网文档编写,因为需求要的是背景全屏铺满,重要的还是css,一定要加important强制覆盖,不然不够内联的优先级高。
.bg-full { background-size: cover !important; -webkit-background-size: cover !important; -o-background-size: cover !important; background-position: center 0; background-repeat: no-repeat !important; }
其他的css普通样式,是根据自己的项目需求给宽给高的,
.swiper-container { width: 100%; height: 753px; top: -66px; }
最后就是js
var mySwiper = new Swiper ('.swiper-container', { loop: true, spaceBetween: 30, effect: 'fade', // 如果需要分页器 pagination: { el: '.swiper-pagination', clickable: true, }, // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, autoplay: { delay: 5000, //用户操作swiper之后,是否禁止autoplay。默认为true:停止。 //如果设置为false,用户操作swiper之后自动切换不会停止,每次都会重新启动autoplay。 //操作包括触碰,拖动,点击pagination等。 disableOnInteraction: false, } })effect:‘fade’就是设置轮播的渐变效果,还有其他炫酷效果和动画可以参照动画,这插件真心强大。