第一步 上代码
JS
var swiper = new Swiper(".news",{
pagination: ".news_lis",
paginationClickable: true,
slidesPerView: 4,
spaceBetween: 20,
nextButton: ".news-next",
prevButton: ".news-prev",
autoplay: 3000,
breakpoints: {
1200: {
slidesPerView: 3,
spaceBetween: 20
},
1024: {
slidesPerView: 3,
spaceBetween: 20
},
768: {
slidesPerView: 2,
spaceBetween: 20
},
640: {
slidesPerView: 1,
spaceBetween: 10
}
}
});html
<!-- Swiper --><div class="swiper-container news">
<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 class="swiper-slide">Slide 4</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination news_lis"></div>
<!-- Add Arrows -->
<div class="swiper-button-next news-next"></div>
<div class="swiper-button-prev news-prev"></div>
</div>第二步分析
var swiper = new Swiper(".news",{
//绑定置顶容器class
pagination: ".news_lis",
//分页clss(就是下面小圆点的容器)
paginationClickable: true
,//点击分页圆点是否切换
slidesPerView: 4
,//每页显示几个
spaceBetween: 20
,//每个间距是多少
nextButton: ".news-next"
,//绑定下一个按钮容器的class
prevButton: ".news-prev",
//绑定上一个按钮容器的class
autoplay: 3000,
//设置多少毫秒会执行一次动画（可以理解为：翻页 / 切换）
centeredSlides: false
//值为【false】时左对齐，默认就是左对齐，值为【true】时居中对齐
breakpoints: {
//响应布局设置
1200: {
//如果屏幕宽度小于<1200
slidesPerView: 3,
//每页显示3个
spaceBetween: 20
//每个间距是20
},
1024: {
slidesPerView: 3,
spaceBetween: 20
},
768: {
slidesPerView: 2,
spaceBetween: 20
},
640: {
//如果屏幕宽度小于
<640
slidesPerView: 1,
//每页显示1个
spaceBetween: 10
//每个间距是10
}
}
});
第三步 总结
你看过这篇文章后，你对swiper已经有个初步了解了！做一般常见项目已经可以游刃有余了！~！骚年！！！
