【JavaScript】カルーセルスライダの定番はFlickityで決まり!なのだが、玉石混交の情報に注意!な件。

technology music disco sound HTML
Photo by Andrew Hawkes on Pexels.com
HTML JavaScript

結論:このFlickityのコードが正解!

カルーセルスライダーのJSライブラリといえば、SlickやbxSliderなど、これまでにいろいろなものを使ってきたが、
カスタマイズしないとスマホのフリックに反応しなかったり、レスポンシブ対応が難しかったりと、結構苦労させられてきた。

なので、それらの問題をデフォルトで解決しているFlickily(フリッキティ)が一番使い勝手がよいと思う今日この頃。
ただし、なぜかそんなFlickityも、情報を発信する人によってやり方がバラバラで、うのみにして発信している情報の通りにやっても動かないパチもんの情報も多かったので、
一番信頼できる情報は以下でしたよってことを自身の備忘録としても置いておきます。

スマホやレスポンシブに対応した高機能スライダー「Flickity」を使ってみた
タッチデバイスやレスポンシブに対応したスライダー「Flickity」を使う機会があったので使い方をまとめてみました。

拡張機能追記(2021/6/13)

スライダーの下に各画像のサムネイルを横並びで表示したいときも、以下のコードを拝借でサクッと実装できます!

Attention Required! | Cloudflare

↓こんな感じ!ECサイトの商品詳細ページにぴったりですね!

タイトルとURLをコピーしました