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. scrollMonitor

    JavaScript

    要素が表示領域に入ったり出たりするとイベントを受け取れる「scrollMonitor」

    scrollMonitorは、要素が表示領域(ビューポート)に入ったり…

  2. CardTabs

    JavaScript

    ミニマルで超軽量・シンプルなタブを実装できるjQueryプラグイン「CardTabs」

    CardTabsは超軽量でシンプルなタブを実装できるjQueryプラグ…

  3. ZooMove

    JavaScript

    マウスオーバーで画像を拡大ズーム・移動もできるjQueryプラグイン「ZooMove」

    ZooMoveは、マウスオーバーで指定された画像やエリアをズームするこ…

  4. no-image

    JavaScript

    リッチキャプションを備えたイメージビューア「CaptionBox」

    CaptionBoxは、リッチキャプションを備えた美しいイメージビュー…

  5. Drift

    JavaScript

    画像にホバーして拡大できる軽量のスクリプト「Drift」

    Driftは画像にホバーした部分を拡大できるシンプルで軽量なスクリプト…

  6. Zoom Slider

    JavaScript

    ズーム機能を備えたシンプルなコンテンツスライダー「Zoom Slider」

    Zoom Sliderは奥行き感を演出したズーム機能を備えたシンプルな…

最近の記事

  1. Aモーニングセット
  2. 白トリュフの塩パンやメロンパンなど
  3. 東京都現代美術館
  4. スーリア バターチキン
  5. そそそ 明太クリームそうめん

アーカイブ

PAGE TOP