Works
スライダー(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
(論理属性)
- 値はなし。指定があるとドットナビゲーションが実装される。
※デザインは、本家のCSS(https://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>