swiper
swiper是一个非常成功的jquery插件。主要应用于网站头图滚动、Tab切换、自定义滚动条甚至是各类微场景。
swiper目前分为swiper2、swiper3、swiper4三个常用版本。
swiper4主要针对移动端进行良好支持。
swiper3则针对IE10及谷歌、火狐等现代化浏览器进行支持。
swiper2是早期的版本,可以支持到IE8甚至更低。
结合开发的实际情况通常swiper3可能更适合我们,这里的文档说明及demo都将只针对swiper3。
DEMO:
swiper的文档参数过于庞大,这里我们只简单介绍常用的参数属性,详细的参数说明请参考官方文档
常用参数:
{
direction:'horizontal', //滚动的方向
speed:300, //滚动速度
loop:true, //是否进行循环播放
autoplay:true, //自动滚动
autoplayDisableOnInteraction:true, //用户操作swiper之后,是否禁止autoplay 默认为true
pagination:'', //分页器容器的css选择器或HTML标签
paginationType:'bullets',//分页器样式类型 (bullets/fraction/progress/custom 自定义)
effect:'slide', //切换效果(fade/cube/coverflow/flip)
prevButton:'', //后退按钮的css选择器或HTML元素
nextButton:'', //前进按钮的css选择器或HTML元素
scrollbar:'', //Scrollbar容器的css选择器或HTML元素
scrollbarHide:true, //滚动条是否自动隐藏
scrollbarDraggable:false,//是否允许拖动滚动条
}