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

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

官方參數(shù)地址:https://www.slickjs.cn/

參數(shù) 類型默認(rèn)值描述
accessibility布爾值TRUE啟用Tab鍵和箭頭鍵導(dǎo)航
adaptiveHeight布爾值FALSE為單滑塊水平輪播啟用自適應(yīng)高度。
autoplay布爾值FALSE啟用自動(dòng)播放
autoplaySpeed數(shù)值3000自動(dòng)播放速度(以毫秒為單位)
arrows布爾值TRUE上一個(gè)/下一個(gè)箭頭
asNavFor字符串null將滑塊設(shè)置為其他滑塊的導(dǎo)航(類或ID名稱)
appendArrows字符串$(element)更改導(dǎo)航箭頭的附加位置(選擇器,htmlString,數(shù)組,元素,jQuery對(duì)象)
appendDots字符串$(element)更改導(dǎo)航點(diǎn)的附加位置(選擇器,htmlString,數(shù)組,元素,jQuery對(duì)象)
prevArrow代碼段/element

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

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

允許您選擇節(jié)點(diǎn)或?yàn)椤吧弦粋€(gè)”箭頭自定義HTML
nextArrow代碼段/element

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

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

允許您選擇節(jié)點(diǎn)或?yàn)椤跋乱徊健奔^自定義HTML
centerMode布爾值FALSE通過(guò)部分上一張/下一張幻燈片啟用居中視圖。與奇數(shù)的slidesToShow計(jì)數(shù)一起使用。
centerPadding字符串'50px'處于中心模式時(shí)的側(cè)面填充(像素或%)
cssEase字符串'ease'CSS3動(dòng)畫緩動(dòng)
customPagingfunctionn/a自定義分頁(yè)模板
dots布爾值FALSE是否顯示圓點(diǎn)指示器
dotsClass字符串'slick-dots'滑動(dòng)指示器點(diǎn)容器類
draggable布爾值TRUE啟用鼠標(biāo)拖動(dòng)
fade布爾值FALSE啟用淡入淡出
focusOnSelect布爾值FALSE啟用對(duì)選定元素的關(guān)注(單擊)
easing字符串'linear'為jQuery動(dòng)畫添加緩動(dòng)。與緩動(dòng)庫(kù)或默認(rèn)緩動(dòng)方法一起使用
edgeFriction數(shù)值0.15滑動(dòng)非無(wú)限輪播邊緣時(shí)的阻力
infinite布爾值TRUE無(wú)限循環(huán)滑動(dòng)
initialSlide數(shù)值0滑動(dòng)即可開(kāi)始
lazyLoad字符串'ondemand'設(shè)置延遲加載技術(shù)。接受“按需”或“漸進(jìn)式”
mobileFirst布爾值FALSE響應(yīng)式設(shè)置使用移動(dòng)優(yōu)先計(jì)算
pauseOnFocus布爾值TRUE暫停焦點(diǎn)自動(dòng)播放
pauseOnHover布爾值TRUE懸停時(shí)暫停自動(dòng)播放
pauseOnDotsHover布爾值FALSE懸停點(diǎn)時(shí)暫停自動(dòng)播放
respondTo字符串'window'響應(yīng)對(duì)象響應(yīng)的寬度??梢允恰按翱凇?,“滑塊”或“最小”(兩者中較小的一個(gè))
responsive對(duì)象none包含斷點(diǎn)和設(shè)置對(duì)象的對(duì)象(請(qǐng)參見(jiàn)演示)。在給定的屏幕寬度下啟用設(shè)置設(shè)置。將設(shè)置設(shè)置為“ unslick”而不是對(duì)象,以禁用給定斷點(diǎn)處的滑動(dòng)。
rows數(shù)值1將此設(shè)置為大于1將初始化網(wǎng)格模式。使用slidesPerRow設(shè)置每行應(yīng)有多少?gòu)埢脽羝?輪播行數(shù))
slideelement''元素查詢用作幻燈片
slidesPerRow數(shù)值1通過(guò)“行”選項(xiàng)初始化網(wǎng)格模式后,可以設(shè)置每個(gè)網(wǎng)格行中有多少?gòu)埢脽羝?/td>
slidesToShow數(shù)值1要顯示的幻燈片數(shù)量
slidesToScroll數(shù)值1要滾動(dòng)的幻燈片數(shù)
speed數(shù)值(ms)300滑動(dòng)/淡入淡出動(dòng)畫速度
swipe布爾值TRUE啟用swiping
swipeToSlide布爾值FALSE允許用戶直接拖動(dòng)或滑動(dòng)到幻燈片上,而與slidesToScroll無(wú)關(guān)
touchMove布爾值TRUE輕觸即可滑動(dòng)
touchThreshold數(shù)值5要推進(jìn)幻燈片,用戶必須滑動(dòng)(1 / touchThreshold)*滑塊的寬度
useCSS布爾值TRUE啟用/禁用CSS過(guò)渡
useTransform布爾值TRUE啟用/禁用CSS轉(zhuǎn)換
variableWidth布爾值FALSE可變寬度的幻燈片
vertical布爾值FALSE垂直滑動(dòng)模式
verticalSwiping布爾值FALSE垂直滑動(dòng)模式
rtl布爾值FALSE更改滑塊的方向以從右到左
waitForAnimate布爾值TRUE忽略動(dòng)畫時(shí)前進(jìn)幻燈片的請(qǐng)求
zIndex數(shù)值

1000

設(shè)置幻燈片的zIndex值,對(duì)IE9和更低版本有用

基本使用

$('.box ul').slick({
        autoplay: true, //是否自動(dòng)播放
        pauseOnHover: false,  //鼠標(biāo)懸停暫停自動(dòng)播放
        speed: 1500,  //切換動(dòng)畫速度
        autoplaySpeed: 5000,  //自動(dòng)播放速度
        slidesToShow: 1,  //要顯示的動(dòng)畫速度
        swipeToSlide: true,  //允許用戶直接拖動(dòng)或滑動(dòng)到幻燈片上
        touchThreshold: 100,  //更換幻燈片需滑動(dòng)寬度(1 / touchThreshold)
        centerMode: true,  //啟動(dòng)居中
        centerPadding: '0', //處于中心模式時(shí)的側(cè)面填充(像素或%)
     arrows: false, //是否開(kāi)啟左右切換
 
     draggable: true, //是否啟用鼠標(biāo)拖動(dòng)
     rows: 2,  //顯示幾行,默認(rèn)為 1
     vertical: false, //是否開(kāi)啟垂直滑動(dòng)模式
     verticalSwiping: false,  //是否開(kāi)啟垂直滑動(dòng)切換
 
    });


標(biāo)簽: slick
最后修改:2025-04-04 10:44:30

非特殊說(shuō)明,本博所有文章均為博主原創(chuàng)。

国产免费久久受久久,人妻AV成熟片久久久久久,亚洲综合无码日韩,国产AV无码乱码精品国产 www.sucaiwu.net