RV gallery-slider

JavaScript

軽量でタッチフレンドリーなギャラリースライダー「RV gallery-slider」

RV gallery-sliderは軽量でタッチフレンドリーなギャラリースライダーを実装できるのが特徴です。jQueryをベースにしているとのこと。シンプル・軽量なので、スマホなどモバイルからの閲覧にも最適ですね。

RV gallery-slider

デモ

デモではサムネイル付きのものからシンプルな矢印とナビゲーションがついたもの、Lightboxのように拡大表示できるものなど、いくつかのサンプルが用意されています。

サムネイルが付いたタイプでは、上部にサムネイルの一覧が表示されていて、ここから見たい画像をクリックすることでメインエリアに拡大された画像が表示されます。

サムネイル一覧の両端には矢印ボタンも設置されていて、ここから前後の画像にスライドさせることも可能です。

アニメーションはスライドだけではなくフェードで切り替えるサンプルも用意されているので、気になる人はぜひデモに触れてみてください。

マークアップ・使い方ともにとてもシンプルに記述できるので、サクッと実装できるはず。

また、オプションにはnav、close、showNav、showNavIfOneItem、aspectRatio、showDots、showDotsIfOneItem、arrows、fullScreen、loop、autoplay、autoplayDelay、transition、transitionTimeという項目が用意されています。

ナビゲーション、フルスクリーン、ループ、自動再生など、いろんなセッティングが可能です。

RV gallery-slider

関連記事

  1. Scrolla

    JavaScript

    スクロール時にアニメーションするjQueryプラグイン「Scrolla」

    Scrollaは上下スクロールしたときにアニメーションするjQuery…

  2. Combodate

    JavaScript

    日付や時間をドロップダウン式にしてくれる「Combodate」

    Combodateは日付や時間の入力をドロップダウン式に置き換えてくれ…

  3. h5Validate

    JavaScript

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

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

  4. cubeTransition.js

    JavaScript

    3Dキューブのようなスライダーを実装できる「cubeTransition.js」

    cubeTransition.jsは、CSS 3DトランスフォームとC…

  5. Modaal

    JavaScript

    アクセシビリティに優れたモーダルウィンドウを実装できる「Modaal」

    ModaalはWCAG 2.0のレベルAAをサポートしているアクセシビ…

  6. PleaseWait

    JavaScript

    ローディングアイコンをオシャレに実装することができる「PleaseWait」

    PleaseWaitはローディングアイコンをオシャレに見せることができ…

最近の記事

  1. オリジナルチキン6ピース
  2. 200-DGCAM019
  3. ハクバ GW-PRO RED フォトグローブプロ PL
  4. Soundcore Liberty Air 2

アーカイブ

PAGE TOP