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. Rate Yo!

    JavaScript

    星評価(レーティング)を簡単に実装できるjQueryプラグイン「Rate Yo!」

    Rate Yo!というjQueryプラグインを使えば、SVGを使った星…

  2. no-image

    JavaScript

    スライダータイプの質問フォーム実装「jquery.formslider」

    jquery.formsliderはスライダータイプによる質問フォーム…

  3. Viewer

    JavaScript

    画像の拡大や縮小、回転などができるイメージギャラリー「Viewer」

    Viewerは画像の拡大や縮小、回転、上下左右の切り替えといった機能を…

  4. Letter by Letter JS

    JavaScript

    美しいフェードでテキストが徐々に表示されていく「Letter by Letter JS」

    Letter by Letter JSは美しいフェードでテキストを徐々…

  5. no-image
  6. jQuery.mousetip

    JavaScript

    マウスの動きや位置に追従してくるツールチップを実装できる「jQuery.mousetip」

    jQuery.mousetipはマウスの動きや位置に追従してくる軽量の…

最近の記事

  1. ユニクロ エアリズム マイクロメッシュVネックT(半袖)
  2. ライオン システマ 超コンパクト ふつう
  3. タリーズ ハムチーズ&サラダサンド
  4. クリニカのY字タイプのフロス
  5. 日和山公園の桜

アーカイブ

PAGE TOP