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. no-image
  2. simplePagination.js
  3. no-image

    JavaScript

    手軽にパララックス効果を実装できるシンプル・軽量な「simpleParallax」

    simpleParallaxは、手軽にパララックス効果を画像に実装する…

  4. Nex

    JavaScript

    ダイナミックで美しいフルスクリーンのjQueryスライダーを実装できる「Nex」

    Nexはダイナミックで様々なアニメーションエフェクトが用意されたフルス…

  5. Background Blur

    JavaScript

    画像をボカしてくれるクロスブラウザ対応の「Background Blur」

    Background Blurは画像をカッコよくボカしてくれるクロスブ…

  6. Mobilepopup

    JavaScript

    軽量でモバイルにも最適なポップアップウィンドウを実装できる「Mobilepopup」

    Mobilepopupは、軽量でカスタマイズ性に優れたモバイルにも最適…

最近の記事

  1. DCG-CA21
  2. Apple WatchでのMacロック解除を無効
  3. オータムスイートポテトフラペチーノ
  4. 紅葉
  5. ナノケア EH-NA0E

アーカイブ

PAGE TOP