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,//是否允许拖动滚动条
}

results matching ""

    No results matching ""