slick- 好用的圖片輪播套件，也支援手機手勢及 RWD

網址

https://kenwheeler.github.io/slick/

2021-08-03 15:05:04

slick 是一個很好用的圖片輪播套件，還號稱是 the last carousel you'll ever need，我個人也覺得是很棒，支援 RWD 也支援手機手勢，這樣不管在任何裝置上都可以正常操作。

基本上這也是 jQuery 的套件，所以一樣要先把 jQuery 讀進來。

再來透過 cdn 讀入：

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

基本用法如下，指定要使用的區塊即可：

$('.autoplay').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
});

更多的設定集範例說明可以看官網的文件。

[CSS] 垂直文字書寫- writing-mode 和 text-orientation Rgbstock- 由攝影師及圖片愛好者所建立的免費圖庫網站

你可能也會喜歡的

解決手機上 safari, chrome 瀏覽器 100vh 無法剛好一整頁的問題

[Alpine.js] 極輕量的 javascript 框架，初始化教學

[jQuery Plugin] 拖曳切換內容- twentytwenty

jsDelivr- 收錄許多網頁 cdn 資源的網站

在 vue 裡面的，利用 v-on 觸發事件時，method 是否有加 () 的差別。

Apify：專為開發者設計的網頁數據爬蟲與自動化利器

課程推薦

AI工作術全面學習實戰營：6 堂精選課程，學會最好用 AI 工具，翻轉你的人生

《PChome雜誌》攜手 5 位在 AI 領域的專業講師，打造上述 6 堂實用課程，教你學會時下最好用的 AI 工具，導入生成式 AI 來產製工作內容，改造並升級你的工作流程。

輸入折扣碼 ZERO2024 還可以額外獲得 NT$400 優惠喔。

HTML與SEO實戰應用—並以ChatGPT助力提升網站品質與流量

本課程專為希望深入了解 HTML 並有效結合 SEO 策略的學員設計。我們將重點放在 HTML 的深度學習與應用上，同時穿插介紹如何透過搜索引擎優化提升網站能見度。透過即時互動式的直播教學，加上 ChatGPT 的輔助，您將學習到如何建立一個結構優良、美觀且符合 SEO 標準的網站。這不僅會提升網站的用戶體驗，還會大幅提高網站的搜索引擎排名，進而增加訪客流量和潛在客戶。