jRCarousel

JavaScript

モダンエフェクトなレスポンシブ対応のカルーセル実装「jRCarousel」

jRCarouselはモダンエフェクトなカルーセルを実装できるjQueryプラグインです。レスポンシブに対応しているのでPC、タブレット、スマートフォンとさまざまなデバイスで最適なレイアウトに表示されます。

便利なオプションも備わっているので、カスタマイズしたい方にも最適です。また、マークアップがシンプルなのもうれしいポイントのひとつですね。

jRCarousel

デモ

画像にマウスオーバーすると両サイドに前後移動できる左右の矢印が表示されます。また、カルーセルの右下にはドットのナビゲーションもついているので、ここから好きな位置へ移動することも可能です。

オプションでは幅や高さの指定やアニメーションスピード、アニメーションインターバルの指定をすることができます。

また、オートプレイ(自動スタート)のオン・オフもオプションから設定可能です。

アニメーションはslide、scroll、fade、zoomInSlide、zoomInScrollから選択できます。そのほか、ナビゲーションにはcirclesかsquaresを指定できます。

これ以外にもいろいろオプション項目が用意されているので、気になる方は是非チェックしてみてください。

というわけで、ファイル容量も小さいレスポンシブに対応したアニメーションつきカルーセルを実装できる「jRCarousel」のご紹介でした。

jRCarousel

Clipyスニペットも登録できるMacの人気クリップボードアプリ「Clipy」前のページ

MacのUSキーボードでcontrol + spaceの日本語入力と英字入力の切り替えをcommand + spaceに変更する設定方法次のページ日本語入力と英字入力の切り替え

関連記事

  1. NavSync

    JavaScript

    ナビゲーションとコンテンツが連動するjQueryプラグイン「NavSync」

    NavSyncはナビゲーションとコンテンツが連動してアニメーションする…

  2. Nivo Zoom

    JavaScript

    Lightbox風に画像をズームして表示させるjQueryプラグイン「Nivo Zoom」

    Lightbox風に画像をズームして表示させるjQueryプラグイン「…

  3. lightgallery.js
  4. jquery.mark

    JavaScript

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

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

  5. no-image
  6. no-image

    JavaScript

    あらかじめ設定したリストなどから複数タグを選択できる「Tokenize2」

    Tokenize2は、あらかじめ設定したリストやAjaxから複数のタグ…

最近の記事

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

アーカイブ

PAGE TOP