Works

Home Works スライダー(Flickity)

スライダー(Flickity)

JavaScriptライブラリ「Flickity」を使ったフリックスライダー。

クラスjs-sliderを付与した要素の中に、スライドさせる画像を列挙する。
ここではdiv要素.js-sliderを付与。figure要素の中にpicture要素を入れ、source要素デスクトップ用とモバイルデバイス用ふたつのサイズの画像を用意し、ビューポート幅で切り替わるように設置。

<div class="js-slider" data-loop data-arrow data-dots data-auto="6000"> <figure class="slider_item"><picture> <source srcset="../../assets/img/visual_1.webp" media="(min-width:768px)" width="1200" height="600"> <source srcset="../../assets/img/visual_1_mb.webp" media="(max-width:767px)" width="600" height="400"> <img src="../../assets/img/visual_1.webp" alt="" width="1200" height="600" loading="lazy"> </picture></figure> <figure class="slider_item"><picture> <source srcset="../../assets/img/visual_2.webp" media="(min-width:768px)" width="1200" height="600"> <source srcset="../../assets/img/visual_2_mb.webp" media="(max-width:767px)" width="600" height="400"> <img src="../../assets/img/visual_2.webp" alt="" width="1200" height="600" loading="lazy"> </picture></figure> ︙ </div>

オプション

各種data属性にて、本家「Flickity」のオプションに対応している。

data-lock(論理属性)
値はなし。指定があるとドラッグ操作が無効になる。
data-loop(論理属性)
値はなし。指定があると最後のスライドから最初のスライドに一方向に繋がりラップアラウンドし無限にスライドする。
data-group
指定した数でスライドをグループ化してスライドするようになる。未指定の場合は
data-auto
指定すると自動スライドが有効になる。値には数値を指定し、指定した数値のミリ秒ごとに自動でスライドする。
data-cell
スライドする要素を限定する。値には文字列で、対象の要素をCSSセレクタで指定する。
例えばdata-cell=".slider_item"のように。
data-arrow(論理属性)
値はなし。指定があると矢印(進む/戻る)コントロールが実装される。
data-dots(論理属性)
値はなし。指定があるとドットナビゲーションが実装される。

※デザインは、本家のCSShttps://unpkg.com/flickity@2/dist/flickity.min.cssを少し調整した「flickity.css」が適用される。サイトに合わせて要調整のこと。

head要素内で以下の「Flickity」ライブラリを読み込んでおくと表示が速いが、なければJavaScript側で読み込む(ただし遅い)
(※このページではJavaScript側で読み込んでいる。)

<link rel="stylesheet" href="../../assets/css/flickity.css"> <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js" defer></script>