jQueryがなくても本当に動きますか？

はい、Flickityは純粋なJavaScriptで動作します。jQueryは不要です。

WordPressでもFlickityは使えますか？

はい、テーマやウィジェットにHTMLとJSを追加すれば利用できます。ただし、テーマのカスタマイズには注意が必要です。

SwiperやSlickとの違いは何ですか？

Flickityは軽量で初心者向け。Swiperは多機能、SlickはjQuery依存です。利用目的に応じて選びましょう。

スライダーの高さがそろわない場合はどうすればいい？

contain: true や CSS の min-height、imagesLoaded: true を試してください。

自動再生（autoPlay）が止まってしまうのはなぜ？

ユーザー操作やタブ切替で一時停止します。pauseAutoPlayOnHover: false を使うと良いです。

【初心者向け】Flickityの使い方と設置方法｜HTMLだけでカルーセルスライダーを簡単実装！

Flickity（フリキティ）は、軽量でレスポンシブ対応かつjQuery不要のカルーセルスライダーを簡単に実装できるJavaScriptライブラリです。

この記事では、初心者の方でもすぐに使えるようにFlickityの導入から使い方、カスタマイズ方法までわかりやすく解説します。

Flickityとは？初心者にもやさしいスライダープラグイン
1. Flickityの特徴
2. 他のスライダー（SwiperやSlick）との違い
Flickityのインストール方法【CDN or ダウンロード】
1. 公式サイトからファイルをダウンロードする方法
2. CDNで読み込む方法（おすすめ）
Flickityの基本的な使い方【HTMLだけでOK】
オプション設定でFlickityをカスタマイズ
1. オプション設定の書き方（data属性の使い方）
2. よく使われるオプション一覧
よくあるトラブルと解決法
1. スライダーが動かないときのチェックリスト
2. スマホで表示が崩れるときの対処法
Flickityに関するよくある質問（FAQ）
まとめ｜Flickityなら初心者でも簡単にスライダーが作れる

Flickityとは？初心者にもやさしいスライダープラグイン

Flickityの特徴

HTMLとCSSだけで簡単に実装可能
jQueryなしで動作（純粋なJavaScript）
タッチ操作・スワイプ対応（スマホでも快適）
軽量で高速な動作

他のスライダー（SwiperやSlick）との違い

ライブラリ	jQuery依存	特徴
Flickity	なし	軽量・初心者向け
Swiper	なし	高機能・上級者向け
Slick	あり	jQuery前提、古い環境に対応

Flickityは「シンプルに使いたい」「軽くて手軽なスライダーが欲しい」という方におすすめです。

Flickityのインストール方法【CDN or ダウンロード】

公式サイトからファイルをダウンロードする方法

Flickity公式サイトにアクセス。
flickity.pkgd.min.js と flickity.css をダウンロード。
以下のようにHTMLファイルに読み込みます。

<!-- CSS -->
<link rel="stylesheet" href="css/flickity.css">

<!-- Javascript -->
<script src="js/flickity.pkgd.min.js"></script>

※ファイルのパスは環境に合わせて調整してください。

CDNで読み込む方法（おすすめ）

以下のコードを <head> タグ内に記述するだけですぐに使えます。

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">

<!-- Javascript -->
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

Flickityの基本的な使い方【HTMLだけでOK】

最小構成のHTMLコード例

<div class="js-flickity">
  <div>sample1</div>
  <div>sample2</div>
  <div>sample3</div>
  <div>sample4</div>
  <div>sample5</div>
</div>

.js-flickity クラスをつけるだけでカルーセルが動作します。

See the Pen Flickity-sample1 by take it easy (@take-it-easy) on CodePen.

見た目を整えるCSS例

.slider-cell {
  width: 90%;
  height: 200px;
  background: #8C8;
  margin: 0 5px;
}

HTML例：

<div class="js-flickity slider-wrapper">
  <div class="slider-cell">sample1</div>
  <div class="slider-cell">sample2</div>
  <div class="slider-cell">sample3</div>
  <div class="slider-cell">sample4</div>
  <div class="slider-cell">sample5</div>
</div>

See the Pen Flickity-sample2 by take it easy (@take-it-easy) on CodePen.

jQueryは不要です

Flickityは純粋なJavaScriptで動作するため、jQueryは一切必要ありません。

オプション設定でFlickityをカスタマイズ

オプション設定の書き方（data属性の使い方）

HTMLタグに data-flickity-options を使って設定できます：

<div class="js-flickity" data-flickity-options='{"wrapAround": true, "autoPlay": 3000}'>
  <div>sample1</div>
  <div>sample2</div>
</div>

よく使われるオプション一覧

オプション名	説明	初期値
wrapAround	最後まで行ったら最初に戻る	false
autoPlay	自動再生（ミリ秒指定も可能）	false
freeScroll	スナップせずに自由スクロール	false
contain	スライドをコンテナ内に収める	false
cellAlign	配置位置（left, center, right）	center
prevNextButtons	前後ボタンを表示	true
pageDots	ページナビゲーション表示	true
imagesLoaded	画像の読み込みを待つか	false
pauseAutoPlayOnHover	自動再生をホバーで停止するか	true