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

2019/01/19 2,131 2 網站技術 , 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

留言區 / Comments

萌芽論壇