Flickity:超強大的 jQuery 插件!建立全平台都支援的幻燈片或卡片!

2019/01/19 104 網站技術 , HTML , CSS , JavaScript , jQuery

「Flickity」算是我在找瀑布流插件時意外找到的 jQuery 插件,那時候剛好也非常缺乏像樣的幻燈片程式,網站首頁也需要一個來展示影片,就這麼剛好讓我找到這款幾乎萬能的插件!怎麼說呢?首先我想要的功能它都有!支援上下頁手動切換、手機滑動切換、游標拖曳切換、下方圓點導覽以及自適應的功能!所以後來我不只拿這個插件做幻燈片,還用來做了網站導覽卡片,一樣非常好用!官方網站更是提供了大量的方法、風格可以直接使用,也都有 Demo 提供參考,很適合初學者來使用!

使用方法也非常簡單,只要懂基本的 HTML、CSS 與 JS 一定就能將幻燈片給做出來!

▲官方網站截圖,這裡就有展示最基本的幻燈片。

官方支援使用兩種 JavaScript 框架進行初始化,一個是「jQuery」,另一個是「Vanilla JS」,這邊就用最多人用的「jQuery」示範安裝。

「Flickity」有 CSS 與 JS 檔案,都要於內引入(※「/path/to/」代表您指定的路徑):

<link rel="stylesheet" href="/path/to/flickity.css" media="screen"> <script src="/path/to/flickity.pkgd.min.js"></script>

內要有容器來放置幻燈片要顯示的東西:

<div class="main-carousel">
  <div class="carousel-cell">...</div>
  <div class="carousel-cell">...</div>
  <div class="carousel-cell">...</div>
  ...
</div>

接著要用 jQuery 做初始化:

$('.main-carousel').flickity({
  // options
  cellAlign: 'left',
  contain: true
});

這樣就完成最基本的設定啦!可以參考官方所提供的樣式選項找更多可用的功能!

▲官方自動輪播展示。

贊助廣告 ‧ Sponsor advertisements
徵信社服務電話| 外遇疑雲| 阿宅來說徵信社故事| 如何手機監聽| 徵信社電話幾號| 徵信價目表費用| 抓姦在床蒐證| 台北立達徵信社| 免費法律諮詢專線| 馭夫術手段| 設計離婚服務| 男友感情挽回| 包二奶氾濫| 抓小三蒐證| 反跟蹤可行嗎| 尋人查址高手| 夫妻協議離婚| 委託外遇蒐證| 丈夫外遇偷腥| 名人外遇新聞| 立案專業徵信社| 婚前調查協助| 離婚扶養費| 汽車定位追蹤| 危險徵信社任務| 免費法律諮詢| 國際徵信公司|
【業界首推立達徵信FB