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
});

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

RGB、CMYK、XY座標の取得方法Photoshopでポインター位置のRGB、CMYK、XY座標を取得する方法前のページ

iPhoneのタスク管理アプリ「Todoist」がデザインも美しくてオススメ次のページiPhoneのTodoistアプリ

関連記事

  1. JavaScript

    複数カラムをレスポンシブに対応させるjQueryプラグイン「jquery.columns」

    複数あるカラムをレスポンシブに対応させるためのjQueryプラグイン「…

  2. Instafeed.js

    JavaScript

    Webサイト内にInstagramの画像を表示できる「Instafeed.js」

    Instafeed.jsはWebサイト内にInstagramの画像一覧…

  3. jquery.mark

    JavaScript

    キーワードをハイライトしてくれる「jquery.mark」

    jquery.markはキーワードをハイライトしてくれるjQueryプ…

  4. spzoom

    JavaScript

    シンプルで使いやすい画像ズームを実装できるjQueryプラグイン「spzoom」

    spzoomはシンプルな操作性で使いやすい画像ズーム機能を実装できるj…

  5. no-image

    JavaScript

    軽量なスティッキー要素を実装できるjQueryプラグイン「Zebra Pin」

    Zebra Pinは軽量なスティッキー要素を実装できるjQueryプラ…

  6. jExcel

    JavaScript

    Excelと互換性のあるスプレッドシートを埋め込めるjQueryプラグイン「jExcel」

    jExcelは、ブラウザにExcelと互換性のあるスプレッドシートを埋…

最近の記事

  1. EOS R6
  2. EOS R5
  3. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ

アーカイブ

PAGE TOP