兼容pc端和移动端的轮播图插件swiper.js
swiper.js提供给我们很多种不同的demo效果，我们可以根据⾃⼰的需求来选择⾃⼰需要。所有demo的HTML部分，CSS⼏乎是⼀样的，不⼀样的是调⽤的js⽅法，或配置的参数不同来达到不同的效果。
使⽤⽅法
⾸先我们引⼊ swiper.min.css和 swiper.min.js
HTML部分
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
CSS部分所有的demo是⼀样的
.swiper-container {
width: 100%;
height: 100%;
}
.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;
}
js部分可以根据⾃⼰下载的demo不同来选取⾃⼰需要的demo下的js部分代码
例如：
var swiper = new Swiper('.swiper-container', {
slidesPerView: 3,
spaceBetween: 30,
slidesPerGroup: 3,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},js简易轮播图代码
});
你可以把swiper-slide⾥⾯Slide 1替换成⾃⼰的图⽚，这样这个效果就完成的了。
其中⾥⾯的参数
slidesPerView：显⽰⼏张图⽚
spaceBetween：图⽚之间的间距
slidesPerGroup：定义slides的数量多少为⼀组，在旋转模式下有效。其实就是滑动的时候⼀下滑动⼏张图⽚了。loop：图⽚是否循环播放
上⾯这个轮播图是不会⾃⼰播放的，要⾃⼰播放，得⾃⼰⼿动添加autoplay:true及⾃动播放

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。