Swiper.js的使用
下载swiper.min.js和swiper.min.css
在html头部引入这两个文件,
<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/swiper.min.js"></script>
在HTML文件的对应位置添加相应的class名,如:
<div class="banner swiper-container" id="banner">
<div class="swiper-wrapper">
<div class="swiper-slide slide1"></div>
<div class="swiper-slide slide2"></div>
<div class="swiper-slide slide3"></div>
</div>
<div class="swiper-pagination"></div>
</div>
“这里可以实现banner的背景图片的切换,和轮播图一样的效果,不需要在html引入图片
在css中引入图片
nav .banner .swiper-wrapper .slide1{width:100%;height:495px;background: url(../img/banner.png)no-repeat;background-position: center center;}
nav .banner .swiper-wrapper .slide2{width:100%;height:495px;background: url(../img/banner2.png)no-repeat;background-position: center center;}
nav .banner .swiper-wrapper .slide3{width:100%;height:495px;background: url(../img/banner3.png)no-repeat;background-position: center center;}”
JavaScript:
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
loop: true,
speed:1000,
autoplay: {
delay: 3000,
},
scrollbar: {
el: '.swiper-scrollbar',
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});