式、懶加載與縮略圖導(dǎo)航)
slick 輪播上手指南10 分鐘跑通響應(yīng)式、懶加載與縮略圖導(dǎo)航【免費(fèi)下載鏈接】slickthe last carousel youll ever need項(xiàng)目地址: https://gitcode.com/GitHub_Trending/sl/slick產(chǎn)品櫥窗、首屏大圖、圖片畫廊——輪播是 Web 頁(yè)面里出場(chǎng)率最高的組件。真正麻煩的從來(lái)不是讓它動(dòng)起來(lái)而是不同屏幕下的列數(shù)適配、過(guò)渡動(dòng)畫不卡頓、移動(dòng)端觸摸和桌面端鼠標(biāo)拖拽行為一致。slick 是一款基于 jQuery 的輪播插件把這些常見需求封裝進(jìn)了一個(gè)配置對(duì)象slidesToShow、responsive、lazyLoad幾個(gè)選項(xiàng)玩熟基本能覆蓋絕大多數(shù)輪播場(chǎng)景。讀完這篇你能從零搭出一個(gè)可用的 slick 輪播處理響應(yīng)式斷點(diǎn)與圖片懶加載并避開幾個(gè)最常見的坑。先用一句話認(rèn)識(shí) slickslick 是一個(gè) jQuery 插件形態(tài)的輪播庫(kù)npm 包名為slick-carousel口號(hào)是你需要的最后一個(gè)輪播插件。它和 Swiper 這類零依賴輪播最大的差異在于它綁定 jQuery 生態(tài)初始化就是熟悉的一行$(.selector).slick({...})對(duì)老項(xiàng)目尤其是已有 jQuery 技術(shù)棧的項(xiàng)目集成成本最低。輕量集成拷貝slick.css、slick.min.js兩個(gè)文件即可運(yùn)行觸摸內(nèi)置鼠標(biāo)拖拽與手機(jī)滑動(dòng)手勢(shì)開箱即用響應(yīng)式聲明式responsive數(shù)組配斷點(diǎn)無(wú)需寫媒體查詢 JS懶加載內(nèi)置lazyLoad支持按需、漸進(jìn)、預(yù)加載三種模式MIT 協(xié)議商用項(xiàng)目可放心使用3 分鐘跑通最小輪播把庫(kù)放到項(xiàng)目里兩種方式任選# 克隆倉(cāng)庫(kù)取 slick/ 子目錄 git clone https://gitcode.com/GitHub_Trending/sl/slick # 或者直接裝 npm 包 npm install slick-carousel倉(cāng)庫(kù)根目錄的index.html是一個(gè) Playground 演示頁(yè)里面集中展示了垂直、居中、變寬、懶加載等多種初始化寫法遇到不確定的配置可以先翻它。文件就位后輪播容器的寫法非常樸素外層一個(gè) div每個(gè)子 div 就是一張幻燈片。注意 slick 依賴 jQuery 1.8package.json的 peerDependencies 里寫明了版本下限本地準(zhǔn)備好 jQuery 文件即可link relstylesheet href./slick/slick.css link relstylesheet href./slick/slick-theme.css div classdemo-slider divimg srcimages/1.jpg alt幻燈片1/div divimg srcimages/2.jpg alt幻燈片2/div divimg srcimages/3.jpg alt幻燈片3/div /div script srcjquery.min.js/script script src./slick/slick.min.js/script最后一步是初始化。三個(gè)參數(shù)就夠跑起來(lái)$(function () { $(.demo-slider).slick({ dots: true, // 顯示分頁(yè)圓點(diǎn)默認(rèn) false infinite: true, // 無(wú)限循環(huán)其實(shí)默認(rèn)就是 true speed: 500 // 過(guò)渡時(shí)長(zhǎng)單位毫秒 }); });刷新頁(yè)面能左右切換、能點(diǎn)圓點(diǎn)跳頁(yè)的最小 slick 輪播就搞定了 最常用的三個(gè)核心能力響應(yīng)式斷點(diǎn)responsive 數(shù)組配多套布局responsive解決的是同一個(gè)輪播在不同屏寬下顯示不同列數(shù)。它是一個(gè)按屏寬降序排列的數(shù)組每個(gè)元素包含breakpoint斷點(diǎn)單位 px和settings該斷點(diǎn)下覆蓋的配置$(.product-slider).slick({ slidesToShow: 4, // 大屏默認(rèn)顯示 4 列 slidesToScroll: 1, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 3 } }, { breakpoint: 768, settings: { slidesToShow: 2 } }, { breakpoint: 480, settings: { slidesToShow: 1 } } ] });效果瀏覽器窗口拖窄時(shí)列數(shù)會(huì)自動(dòng)從 4 → 3 → 2 → 1 逐級(jí)切換無(wú)需手動(dòng)監(jiān)聽resize。默認(rèn)mobileFirst: false斷點(diǎn)含義是屏寬小于該值時(shí)生效改成true后語(yǔ)義反轉(zhuǎn)為大于該值時(shí)生效。圖片懶加載lazyLoad 三種模式輪播里塞滿大圖會(huì)拖慢首屏。slick 的懶加載約定是把地址寫在data-lazy上插件在幻燈片進(jìn)入視口時(shí)再替換為srcdiv classlazy-slider divimg>$(.lazy-slider).slick({ lazyLoad: ondemand // 滾到才加載另有 progressive、anticipated });三種模式的區(qū)別ondemand滑到哪張加載哪張最省流量progressive面向 JPG 漸進(jìn)式加載anticipated提前預(yù)加載當(dāng)前張的相鄰兩張滑動(dòng)體驗(yàn)最順滑。源碼默認(rèn)值就是ondemand所以不寫這個(gè)參數(shù)時(shí)也默認(rèn)開啟懶加載。加載狀態(tài)自帶 spinner 與 dots 定制內(nèi)容異步加載期間slick 會(huì)給容器加.slick-loading類slick-theme.css里對(duì)應(yīng)一段背景圖樣式就是倉(cāng)庫(kù)根目錄那個(gè)旋轉(zhuǎn)的ajax-loader.gif.slick-loading .slick-list { background: #fff url(./ajax-loader.gif) center center no-repeat; }分頁(yè)圓點(diǎn)同樣可以定制dotsClass改容器類名customPaging函數(shù)決定每個(gè)點(diǎn)的內(nèi)部?jī)?nèi)容返回一個(gè) button 即可比如把圓點(diǎn)換成頁(yè)碼數(shù)字$(.demo-slider).slick({ dots: true, dotsClass: custom-dots, customPaging: function (slider, i) { return $(button/button).text(i 1); } });三個(gè)實(shí)戰(zhàn)配方四列響應(yīng)式產(chǎn)品櫥窗電商列表頁(yè)最常見的形態(tài)大屏四列、自動(dòng)輪播、懸停暫停整段可直接復(fù)制$(.product-slider).slick({ dots: true, arrows: false, // 櫥窗場(chǎng)景一般不用箭頭 slidesToShow: 4, slidesToScroll: 1, autoplay: true, // 默認(rèn) false需顯式開啟 autoplaySpeed: 3000, pauseOnHover: true, // 鼠標(biāo)懸停時(shí)暫停默認(rèn)即 true speed: 300, responsive: [ { breakpoint: 1200, settings: { slidesToShow: 3 } }, { breakpoint: 768, settings: { slidesToShow: 2 } }, { breakpoint: 480, settings: { slidesToShow: 1 } } ] });如果產(chǎn)品數(shù)量不多、不想自動(dòng)播放把a(bǔ)utoplay刪掉即可其余行為不變。全屏首屏大圖淡入淡出更穩(wěn)重首屏 hero 輪播用位移動(dòng)畫會(huì)顯得跳改成fade: true后每張幻燈片交叉淡入淡出視覺(jué)更安靜$(.hero-slider).slick({ dots: true, fade: true, // 位移動(dòng)畫切換為淡入淡出 cssEase: ease, // 緩動(dòng)函數(shù)配合 speed 調(diào)節(jié)節(jié)奏 speed: 600, infinite: true, autoplay: true, autoplaySpeed: 4000, pauseOnHover: false // 首屏常保持自動(dòng)播放不隨懸停暫停 });若首屏內(nèi)容高度不固定圖文混排再加adaptiveHeight: true容器會(huì)跟隨當(dāng)前幻燈片高度自適應(yīng)。主圖 縮略圖聯(lián)動(dòng)導(dǎo)航圖集類頁(yè)面商品詳情、攝影集用asNavFor把兩個(gè)輪播互相綁定主圖負(fù)責(zé)展示縮略圖負(fù)責(zé)導(dǎo)航選中項(xiàng)高亮同步// 主輪播單張展示 $(.main-slider).slick({ slidesToShow: 1, arrows: false, fade: true, asNavFor: .thumb-slider }); // 縮略圖輪播點(diǎn)擊可選中 $(.thumb-slider).slick({ asNavFor: .main-slider, slidesToShow: 5, centerMode: true, // 選中項(xiàng)居中 focusOnSelect: true, // 點(diǎn)擊縮略圖切換主圖 responsive: [ { breakpoint: 768, settings: { slidesToShow: 3 } } ] });聯(lián)動(dòng)是雙向的手動(dòng)滑動(dòng)主圖縮略圖的選中項(xiàng)也會(huì)跟著移動(dòng)不用額外寫同步邏輯。常見坑與進(jìn)階提醒坑一圖片撐破輪播容器?，F(xiàn)象是圖片右側(cè)溢出、列寬錯(cuò)位。原因是 slick 只控制.slick-track的位移不管圖片自身寬度。修復(fù)只需一行寫在全局樣式里.slick-slide img { width: 100%; }坑二自定義的箭頭/圓點(diǎn)樣式被主題覆蓋?，F(xiàn)象是你改了顏色不生效。原因是.slick-theme.css里用了::before偽元素畫箭頭和圓點(diǎn)你的選擇器特異性不夠。加一層父容器前綴即可.demo-slider .slick-prev:before, .demo-slider .slick-next:before { color: #333; } .demo-slider .slick-dots li button:before { color: #999; }坑三連續(xù)調(diào)用 slickGoTo 被吞掉?，F(xiàn)象是快速連點(diǎn)兩次只切了一張。原因是waitForAnimate默認(rèn)true過(guò)渡動(dòng)畫未結(jié)束時(shí)新指令會(huì)被忽略。要么在事件里排隊(duì)處理要么監(jiān)聽切換完成事件再做后續(xù)操作$(.demo-slider).on(afterChange, function (e, slick, currentSlide) { // 動(dòng)畫結(jié)束后執(zhí)行你的聯(lián)動(dòng)邏輯而不是在 goTo 調(diào)用后立即執(zhí)行 });進(jìn)階技巧有三個(gè)都是小改動(dòng)大收益其一動(dòng)態(tài)管理幻燈片。內(nèi)容來(lái)自接口時(shí)用slickAdd追加、slickRemove按索引刪除調(diào)用后會(huì)自動(dòng)重算位置$(.demo-slider).slick(slickAdd, divimg srcimages/new.jpg/div); $(.demo-slider).slick(slickRemove, 2);其二運(yùn)行時(shí)改配置不必銷毀重建slickSetOption支持熱更新單個(gè)參數(shù)$(.demo-slider).slick(slickSetOption, autoplay, true);其三頁(yè)面是 SPA 的話注意清理。路由離開前調(diào)用unslick銷毀實(shí)例避免輪播定時(shí)器與 resize 監(jiān)聽殘留$(.demo-slider).slick(unslick);無(wú)障礙方面默認(rèn)已經(jīng)做了不少accessibility默認(rèn)true支持方向鍵導(dǎo)航、pauseOnFocus默認(rèn)true焦點(diǎn)移入時(shí)暫停自動(dòng)播放一般無(wú)需額外配置若希望切換后焦點(diǎn)跟隨到當(dāng)前幻燈片把focusOnChange設(shè)為true即可。最小閉環(huán)容器 div 子 div一行$(selector).slick({...})就能跑響應(yīng)式responsive數(shù)組按斷點(diǎn)覆蓋slidesToShow不用寫媒體查詢懶加載data-lazy寫地址lazyLoad三模式按流量與體驗(yàn)權(quán)衡聯(lián)動(dòng)asNavFor雙向綁定主圖與縮略圖無(wú)需手寫同步清理SPA 場(chǎng)景記得unslick銷毀實(shí)例下一步建議先打開倉(cāng)庫(kù)自帶的 Playground 演示頁(yè)把里面垂直輪播、居中模式幾個(gè)配置換成自己的數(shù)據(jù)跑一遍配置項(xiàng)拿不準(zhǔn)時(shí)直接查 slick.js 源碼 第 51 行起的defaults對(duì)象所有默認(rèn)值一目了然。完整配置演示index.html核心源碼slick/slick.js主題樣式slick/slick-theme.css拿去用吧?！久赓M(fèi)下載鏈接】slickthe last carousel youll ever need項(xiàng)目地址: https://gitcode.com/GitHub_Trending/sl/slick創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 slick 輪播上手指南：10 分鐘跑通響應(yīng)式、懶加載與縮略圖導(dǎo)航
slick 輪播上手指南10 分鐘跑通響應(yīng)式、懶加載與縮略圖導(dǎo)航【免費(fèi)下載鏈接】slickthe last carousel youll ever need項(xiàng)目地址: https://gitcode.com/GitHub_Trending/sl/slick產(chǎn)品櫥窗、首屏大圖、圖片畫廊——輪播是 Web 頁(yè)面里出場(chǎng)率最高的組件。真正麻煩的從來(lái)不是讓它動(dòng)起來(lái)而是不同屏幕下的列數(shù)適配、過(guò)渡動(dòng)畫不卡頓、移動(dòng)端觸摸和桌面端鼠標(biāo)拖拽行為一致。slick 是一款基于 jQuery 的輪播插件把這些常見需求封裝進(jìn)了一個(gè)配置對(duì)象slidesToShow、responsive、lazyLoad幾個(gè)選項(xiàng)玩熟基本能覆蓋絕大多數(shù)輪播場(chǎng)景。讀完這篇你能從零搭出一個(gè)可用的 slick 輪播處理響應(yīng)式斷點(diǎn)與圖片懶加載并避開幾個(gè)最常見的坑。先用一句話認(rèn)識(shí) slickslick 是一個(gè) jQuery 插件形態(tài)的輪播庫(kù)npm 包名為slick-carousel口號(hào)是你需要的最后一個(gè)輪播插件。它和 Swiper 這類零依賴輪播最大的差異在于它綁定 jQuery 生態(tài)初始化就是熟悉的一行$(.selector).slick({...})對(duì)老項(xiàng)目尤其是已有 jQuery 技術(shù)棧的項(xiàng)目集成成本最低。輕量集成拷貝slick.css、slick.min.js兩個(gè)文件即可運(yùn)行觸摸內(nèi)置鼠標(biāo)拖拽與手機(jī)滑動(dòng)手勢(shì)開箱即用響應(yīng)式聲明式responsive數(shù)組配斷點(diǎn)無(wú)需寫媒體查詢 JS懶加載內(nèi)置lazyLoad支持按需、漸進(jìn)、預(yù)加載三種模式MIT 協(xié)議商用項(xiàng)目可放心使用3 分鐘跑通最小輪播把庫(kù)放到項(xiàng)目里兩種方式任選# 克隆倉(cāng)庫(kù)取 slick/ 子目錄 git clone https://gitcode.com/GitHub_Trending/sl/slick # 或者直接裝 npm 包 npm install slick-carousel倉(cāng)庫(kù)根目錄的index.html是一個(gè) Playground 演示頁(yè)里面集中展示了垂直、居中、變寬、懶加載等多種初始化寫法遇到不確定的配置可以先翻它。文件就位后輪播容器的寫法非常樸素外層一個(gè) div每個(gè)子 div 就是一張幻燈片。注意 slick 依賴 jQuery 1.8package.json的 peerDependencies 里寫明了版本下限本地準(zhǔn)備好 jQuery 文件即可link relstylesheet href./slick/slick.css link relstylesheet href./slick/slick-theme.css div classdemo-slider divimg srcimages/1.jpg alt幻燈片1/div divimg srcimages/2.jpg alt幻燈片2/div divimg srcimages/3.jpg alt幻燈片3/div /div script srcjquery.min.js/script script src./slick/slick.min.js/script最后一步是初始化。三個(gè)參數(shù)就夠跑起來(lái)$(function () { $(.demo-slider).slick({ dots: true, // 顯示分頁(yè)圓點(diǎn)默認(rèn) false infinite: true, // 無(wú)限循環(huán)其實(shí)默認(rèn)就是 true speed: 500 // 過(guò)渡時(shí)長(zhǎng)單位毫秒 }); });刷新頁(yè)面能左右切換、能點(diǎn)圓點(diǎn)跳頁(yè)的最小 slick 輪播就搞定了 最常用的三個(gè)核心能力響應(yīng)式斷點(diǎn)responsive 數(shù)組配多套布局responsive解決的是同一個(gè)輪播在不同屏寬下顯示不同列數(shù)。它是一個(gè)按屏寬降序排列的數(shù)組每個(gè)元素包含breakpoint斷點(diǎn)單位 px和settings該斷點(diǎn)下覆蓋的配置$(.product-slider).slick({ slidesToShow: 4, // 大屏默認(rèn)顯示 4 列 slidesToScroll: 1, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 3 } }, { breakpoint: 768, settings: { slidesToShow: 2 } }, { breakpoint: 480, settings: { slidesToShow: 1 } } ] });效果瀏覽器窗口拖窄時(shí)列數(shù)會(huì)自動(dòng)從 4 → 3 → 2 → 1 逐級(jí)切換無(wú)需手動(dòng)監(jiān)聽resize。默認(rèn)mobileFirst: false斷點(diǎn)含義是屏寬小于該值時(shí)生效改成true后語(yǔ)義反轉(zhuǎn)為大于該值時(shí)生效。圖片懶加載lazyLoad 三種模式輪播里塞滿大圖會(huì)拖慢首屏。slick 的懶加載約定是把地址寫在data-lazy上插件在幻燈片進(jìn)入視口時(shí)再替換為srcdiv classlazy-slider divimg>$(.lazy-slider).slick({ lazyLoad: ondemand // 滾到才加載另有 progressive、anticipated });三種模式的區(qū)別ondemand滑到哪張加載哪張最省流量progressive面向 JPG 漸進(jìn)式加載anticipated提前預(yù)加載當(dāng)前張的相鄰兩張滑動(dòng)體驗(yàn)最順滑。源碼默認(rèn)值就是ondemand所以不寫這個(gè)參數(shù)時(shí)也默認(rèn)開啟懶加載。加載狀態(tài)自帶 spinner 與 dots 定制內(nèi)容異步加載期間slick 會(huì)給容器加.slick-loading類slick-theme.css里對(duì)應(yīng)一段背景圖樣式就是倉(cāng)庫(kù)根目錄那個(gè)旋轉(zhuǎn)的ajax-loader.gif.slick-loading .slick-list { background: #fff url(./ajax-loader.gif) center center no-repeat; }分頁(yè)圓點(diǎn)同樣可以定制dotsClass改容器類名customPaging函數(shù)決定每個(gè)點(diǎn)的內(nèi)部?jī)?nèi)容返回一個(gè) button 即可比如把圓點(diǎn)換成頁(yè)碼數(shù)字$(.demo-slider).slick({ dots: true, dotsClass: custom-dots, customPaging: function (slider, i) { return $(button/button).text(i 1); } });三個(gè)實(shí)戰(zhàn)配方四列響應(yīng)式產(chǎn)品櫥窗電商列表頁(yè)最常見的形態(tài)大屏四列、自動(dòng)輪播、懸停暫停整段可直接復(fù)制$(.product-slider).slick({ dots: true, arrows: false, // 櫥窗場(chǎng)景一般不用箭頭 slidesToShow: 4, slidesToScroll: 1, autoplay: true, // 默認(rèn) false需顯式開啟 autoplaySpeed: 3000, pauseOnHover: true, // 鼠標(biāo)懸停時(shí)暫停默認(rèn)即 true speed: 300, responsive: [ { breakpoint: 1200, settings: { slidesToShow: 3 } }, { breakpoint: 768, settings: { slidesToShow: 2 } }, { breakpoint: 480, settings: { slidesToShow: 1 } } ] });如果產(chǎn)品數(shù)量不多、不想自動(dòng)播放把a(bǔ)utoplay刪掉即可其余行為不變。全屏首屏大圖淡入淡出更穩(wěn)重首屏 hero 輪播用位移動(dòng)畫會(huì)顯得跳改成fade: true后每張幻燈片交叉淡入淡出視覺(jué)更安靜$(.hero-slider).slick({ dots: true, fade: true, // 位移動(dòng)畫切換為淡入淡出 cssEase: ease, // 緩動(dòng)函數(shù)配合 speed 調(diào)節(jié)節(jié)奏 speed: 600, infinite: true, autoplay: true, autoplaySpeed: 4000, pauseOnHover: false // 首屏常保持自動(dòng)播放不隨懸停暫停 });若首屏內(nèi)容高度不固定圖文混排再加adaptiveHeight: true容器會(huì)跟隨當(dāng)前幻燈片高度自適應(yīng)。主圖 縮略圖聯(lián)動(dòng)導(dǎo)航圖集類頁(yè)面商品詳情、攝影集用asNavFor把兩個(gè)輪播互相綁定主圖負(fù)責(zé)展示縮略圖負(fù)責(zé)導(dǎo)航選中項(xiàng)高亮同步// 主輪播單張展示 $(.main-slider).slick({ slidesToShow: 1, arrows: false, fade: true, asNavFor: .thumb-slider }); // 縮略圖輪播點(diǎn)擊可選中 $(.thumb-slider).slick({ asNavFor: .main-slider, slidesToShow: 5, centerMode: true, // 選中項(xiàng)居中 focusOnSelect: true, // 點(diǎn)擊縮略圖切換主圖 responsive: [ { breakpoint: 768, settings: { slidesToShow: 3 } } ] });聯(lián)動(dòng)是雙向的手動(dòng)滑動(dòng)主圖縮略圖的選中項(xiàng)也會(huì)跟著移動(dòng)不用額外寫同步邏輯。常見坑與進(jìn)階提醒坑一圖片撐破輪播容器?，F(xiàn)象是圖片右側(cè)溢出、列寬錯(cuò)位。原因是 slick 只控制.slick-track的位移不管圖片自身寬度。修復(fù)只需一行寫在全局樣式里.slick-slide img { width: 100%; }坑二自定義的箭頭/圓點(diǎn)樣式被主題覆蓋?，F(xiàn)象是你改了顏色不生效。原因是.slick-theme.css里用了::before偽元素畫箭頭和圓點(diǎn)你的選擇器特異性不夠。加一層父容器前綴即可.demo-slider .slick-prev:before, .demo-slider .slick-next:before { color: #333; } .demo-slider .slick-dots li button:before { color: #999; }坑三連續(xù)調(diào)用 slickGoTo 被吞掉?，F(xiàn)象是快速連點(diǎn)兩次只切了一張。原因是waitForAnimate默認(rèn)true過(guò)渡動(dòng)畫未結(jié)束時(shí)新指令會(huì)被忽略。要么在事件里排隊(duì)處理要么監(jiān)聽切換完成事件再做后續(xù)操作$(.demo-slider).on(afterChange, function (e, slick, currentSlide) { // 動(dòng)畫結(jié)束后執(zhí)行你的聯(lián)動(dòng)邏輯而不是在 goTo 調(diào)用后立即執(zhí)行 });進(jìn)階技巧有三個(gè)都是小改動(dòng)大收益其一動(dòng)態(tài)管理幻燈片。內(nèi)容來(lái)自接口時(shí)用slickAdd追加、slickRemove按索引刪除調(diào)用后會(huì)自動(dòng)重算位置$(.demo-slider).slick(slickAdd, divimg srcimages/new.jpg/div); $(.demo-slider).slick(slickRemove, 2);其二運(yùn)行時(shí)改配置不必銷毀重建slickSetOption支持熱更新單個(gè)參數(shù)$(.demo-slider).slick(slickSetOption, autoplay, true);其三頁(yè)面是 SPA 的話注意清理。路由離開前調(diào)用unslick銷毀實(shí)例避免輪播定時(shí)器與 resize 監(jiān)聽殘留$(.demo-slider).slick(unslick);無(wú)障礙方面默認(rèn)已經(jīng)做了不少accessibility默認(rèn)true支持方向鍵導(dǎo)航、pauseOnFocus默認(rèn)true焦點(diǎn)移入時(shí)暫停自動(dòng)播放一般無(wú)需額外配置若希望切換后焦點(diǎn)跟隨到當(dāng)前幻燈片把focusOnChange設(shè)為true即可。最小閉環(huán)容器 div 子 div一行$(selector).slick({...})就能跑響應(yīng)式responsive數(shù)組按斷點(diǎn)覆蓋slidesToShow不用寫媒體查詢懶加載data-lazy寫地址lazyLoad三模式按流量與體驗(yàn)權(quán)衡聯(lián)動(dòng)asNavFor雙向綁定主圖與縮略圖無(wú)需手寫同步清理SPA 場(chǎng)景記得unslick銷毀實(shí)例下一步建議先打開倉(cāng)庫(kù)自帶的 Playground 演示頁(yè)把里面垂直輪播、居中模式幾個(gè)配置換成自己的數(shù)據(jù)跑一遍配置項(xiàng)拿不準(zhǔn)時(shí)直接查 slick.js 源碼 第 51 行起的defaults對(duì)象所有默認(rèn)值一目了然。完整配置演示index.html核心源碼slick/slick.js主題樣式slick/slick-theme.css拿去用吧?！久赓M(fèi)下載鏈接】slickthe last carousel youll ever need項(xiàng)目地址: https://gitcode.com/GitHub_Trending/sl/slick創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考