swiper.js是一款纯JavaScript打造的滑动特效插件,可以用来实现检点轮播图,tab触摸滑动切换等常用效果。下载地址:https://www.swiper.com.cn/download/index.html#file1
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', }, });
你可以把swiper-slide里面Slide 1替换成自己的图片,这样这个效果就完成的了。
其中里面的参数
slidesPerView: 显示几张图片
spaceBetween:图片之间的间距
slidesPerGroup:定义slides的数量多少为一组,在旋转模式下有效。其实就是滑动的时候一下滑动几张图片了。
loop:图片是否循环播放
上面这个轮播图是不会自己播放的,要自己播放,得自己手动添加autoplay:true及自动播放
更多参数设置请参考官网 https://www.swiper.com.cn/api/autoplay/112.html 或 http://www.xiaoshu168.com/jquery/103.html