日日摸夜夜添夜夜添aa,亚洲一区二区在线视频,国产精品入口在线看麻豆,久久久久久久99精品免费观看

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

程序猿 2021-03-13 16:00:35 2774瀏覽 加載中

官方參數地址: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-04-25 19:15:12

非特殊說明,本博所有文章均為博主原創。