slick.js轮播插件得使用方法

程序猿 2021-03-13 16:00:35 2617浏览 加载中

官方参数地址:https://www.slickjs.cn/

参数 类型默认值描述
accessibility布尔值TRUE启用Tab键和箭头键导航
adaptiveHeight布尔值FALSE为单滑块水平轮播启用自适应高度。
autoplay布尔值FALSE启用自动播放
autoplaySpeed数值3000自动播放速度(以毫秒为单位)
arrows布尔值TRUE上一个/下一个箭头
asNavFor字符串null将滑块设置为其他滑块的导航(类或ID名称)
appendArrows字符串$(element)更改导航箭头的附加位置(选择器,htmlString,数组,元素,jQuery对象)
appendDots字符串$(element)更改导航点的附加位置(选择器,htmlString,数组,元素,jQuery对象)
prevArrow代码段/element

<button class="slick-prev" aria-label="Previous" type="button">Previous</button>

/$('.prev-next .prev')

允许您选择节点或为“上一个”箭头自定义HTML
nextArrow代码段/element

<button class="slick-next" aria-label="Next" type="button">Next</button>

/$('.prev-next .next')

允许您选择节点或为“下一步”箭头自定义HTML
centerMode布尔值FALSE通过部分上一张/下一张幻灯片启用居中视图。与奇数的slidesToShow计数一起使用。
centerPadding字符串'50px'处于中心模式时的侧面填充(像素或%)
cssEase字符串'ease'CSS3动画缓动
customPagingfunctionn/a自定义分页模板
dots布尔值FALSE是否显示圆点指示器
dotsClass字符串'slick-dots'滑动指示器点容器类
draggable布尔值TRUE启用鼠标拖动
fade布尔值FALSE启用淡入淡出
focusOnSelect布尔值FALSE启用对选定元素的关注(单击)
easing字符串'linear'为jQuery动画添加缓动。与缓动库或默认缓动方法一起使用
edgeFriction数值0.15滑动非无限轮播边缘时的阻力
infinite布尔值TRUE无限循环滑动
initialSlide数值0滑动即可开始
lazyLoad字符串'ondemand'设置延迟加载技术。接受“按需”或“渐进式”
mobileFirst布尔值FALSE响应式设置使用移动优先计算
pauseOnFocus布尔值TRUE暂停焦点自动播放
pauseOnHover布尔值TRUE悬停时暂停自动播放
pauseOnDotsHover布尔值FALSE悬停点时暂停自动播放
respondTo字符串'window'响应对象响应的宽度。可以是“窗口”,“滑块”或“最小”(两者中较小的一个)
responsive对象none包含断点和设置对象的对象(请参见演示)。在给定的屏幕宽度下启用设置设置。将设置设置为“ unslick”而不是对象,以禁用给定断点处的滑动。
rows数值1将此设置为大于1将初始化网格模式。使用slidesPerRow设置每行应有多少张幻灯片。(轮播行数)
slideelement''元素查询用作幻灯片
slidesPerRow数值1通过“行”选项初始化网格模式后,可以设置每个网格行中有多少张幻灯片
slidesToShow数值1要显示的幻灯片数量
slidesToScroll数值1要滚动的幻灯片数
speed数值(ms)300滑动/淡入淡出动画速度
swipe布尔值TRUE启用swiping
swipeToSlide布尔值FALSE允许用户直接拖动或滑动到幻灯片上,而与slidesToScroll无关
touchMove布尔值TRUE轻触即可滑动
touchThreshold数值5要推进幻灯片,用户必须滑动(1 / touchThreshold)*滑块的宽度
useCSS布尔值TRUE启用/禁用CSS过渡
useTransform布尔值TRUE启用/禁用CSS转换
variableWidth布尔值FALSE可变宽度的幻灯片
vertical布尔值FALSE垂直滑动模式
verticalSwiping布尔值FALSE垂直滑动模式
rtl布尔值FALSE更改滑块的方向以从右到左
waitForAnimate布尔值TRUE忽略动画时前进幻灯片的请求
zIndex数值

1000

设置幻灯片的zIndex值,对IE9和更低版本有用

基本使用

$('.box ul').slick({
        autoplay: true, //是否自动播放
        pauseOnHover: false,  //鼠标悬停暂停自动播放
        speed: 1500,  //切换动画速度
        autoplaySpeed: 5000,  //自动播放速度
        slidesToShow: 1,  //要显示的动画速度
        swipeToSlide: true,  //允许用户直接拖动或滑动到幻灯片上
        touchThreshold: 100,  //更换幻灯片需滑动宽度(1 / touchThreshold)
        centerMode: true,  //启动居中
        centerPadding: '0', //处于中心模式时的侧面填充(像素或%)
     arrows: false, //是否开启左右切换
 
     draggable: true, //是否启用鼠标拖动
     rows: 2,  //显示几行,默认为 1
     vertical: false, //是否开启垂直滑动模式
     verticalSwiping: false,  //是否开启垂直滑动切换
 
    });


标签: slick
最后修改:2025-02-05 17:45:42

非特殊说明,本博所有文章均为博主原创。