Categories: HTMLJavaScript

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

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

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

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

http://webism.jp/js-jquery/flickity/

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

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

Just a moment...

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

ナナイロ

ECサイト制作に強いフロントエンドエンジニア。Web関連のお役立ち技術情報を発信しています。 2025年の最新のAI生成コーディングのコースをUdemyに公開いたしました。爆速でコードを書きたい方は必見です!! さらに、今年(2025年)からVoicyのパーソナリティに挑戦し始めました!ラジオでWebエンジニアの生の声をお届けしています。