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

    JavaScript

    マスクエフェクトが素敵なスライダー実装「Masked Circle Slider」

    Masked Circle Sliderは、円形のマスクエフェクトが素…

  2. h5Validate

    JavaScript

    HTML5のフォームバリデーションを実装できるjQueryプラグイン「h5Validate」

    h5ValidateはHTML5によるフォームバリデーションを実装する…

  3. formToWizard

    JavaScript

    ステップごとに入力可能なフォームを実装できる「formToWizard」

    formToWizardはステップごとに(ウィザード)入力可能なフォー…

  4. FREVR

    JavaScript

    シンプルな無限スクロールを実装できるjQueryプラグイン「FREVR」

    FREVRはシンプルで軽量な無限スクロールの機能を実装することができる…

  5. no-image

    JavaScript

    フォームに文字制限を設定できるjQueryプラグイン「Character Limit」

    Character Limitは、フォーム要素に文字制限を設定するため…

  6. no-image

    JavaScript

    レスポンシブでスタイリッシュな「lightbox-jquery-plugin」

    lightbox-jquery-pluginは、レスポンシブに対応した…

最近の記事

  1. CAR-HLD12BK
  2. OWL-LPB6701LA
  3. cheero Power Mountain mini 30000mAh CHE-110

アーカイブ

PAGE TOP