JavaScript

タッチ、フリック、レスポンシブ対応のスライダーギャラリー「Flickity」

Flickityはスマフォやタブレットに最適なタッチやフリック、またはレスポンシブに対応したスライダーギャラリーを実装できるjQueryプラグインです。iPhoneでも確認してみたところ、かなり滑らかでいい感じにスライドしました。

Flickity

Flickityのデモや詳細は以下からチェックできます。

Flickity

Flickity

スライダーはとてもシンプルなデザインですが、前後矢印やナビゲーションといった必要な機能はしっかりと備わっています。カルーセルっぽくカスタマイズすることもできるので、色々と応用が効きそうなプラグインですね。

Flickityの使い方は、まずjQuery本体、flickity.css、flickity.pkgd.min.jsを読み込み、以下のようにHTMLをマークアップします。id名にはmain-galleryを、各コンテンツにはgallery-cellというクラス名を付与します。

<div id="main-gallery">
    <div class="gallery-cell">...</div>
    <div class="gallery-cell">...</div>
    <div class="gallery-cell">...</div>
    <!-- 中略 -->
</div>

あとはプラグインをセッティングするだけです。cellAlignとcontainはオプションになります。

$('#main-gallery').flickity({
    cellAlign: 'left',
    contain: true
});

その他にも自動再生機能といった様々なオプションが用意されています。また、公式ページでは実際に画像を用いたサンプルなどもあるので、気になる方は是非チェックしてみてください。

関連記事

  1. Unite Gallery

    JavaScript

    レスポンシブな画像・動画ギャラリーを実装できる「Unite Gallery」

    Unite Galleryは、レスポンシブに対応した画像・動画ギャラリ…

  2. Scroll To Top Then Fixed Navigation Effect With jQuery and CSS
  3. Monthly.js

    JavaScript

    レスポンシブに対応したカレンダーを実装できる「Monthly.js」

    Monthly.jsはレスポンシブに対応したシンプルで美しいカレンダー…

  4. jQuery Responsive Tabs
  5. Accordion.JS

    JavaScript

    クイックな開閉で使いやすいアコーディオン実装「Accordion.JS」

    Accordion.JSは、開閉の動作がクイックで使いやすいアコーディ…

  6. JavaScript

    円グラフ/折れ線グラフ/棒グラフを簡単に作れるjQueryプラグイン「Peity」

    個人的にかなり便利なプラグインを発見しました。円グラフ、折れ線グラフ、…

最近の記事

  1. フレンチトーストや自家製ソーセージ
  2. ハレイワ スムージー
  3. クローバーで淹れたコーヒー
  4. 雪が降る日本海

アーカイブ

PAGE TOP