no-image

JavaScript

水平・垂直に対応したカルーセルスライドショー「jCarousel」

jCarouselは水平・垂直に対応したカルーセルスライドショーを実装できるjQueryプラグインです。スライドショーのナビゲーションがカルーセルのようになっているのが特徴です。セッティング次第でレスポンシブやAjaxによる読み込みなどにも対応できるので、カスタマイズ性にも優れています。

jCarousel

デモ

デモにはベーシックなものからレスポンシブに対応したもの、Ajaxを使用したもの、垂直タイプのカルーセルなどいくつかの種類が用意されています。

Basic carouselでは前後に切り替えできる左右矢印ボタンが設置されたスライダーが表示されています。スライダーの左下には数字が書かれたナビゲーションボタンが設置されていて、ここから特定のコンテンツへピンポイントで移動できます。アニメーションは横にスライドされます。

逆にVertical carouselでは縦にスライドアニメーションします。

水平・垂直に対応したスライドアニメーションができるほか、レスポンシブにも対応させたりAjaxでコンテンツを読み込ませたりと、カスタマイズ次第でいろいろなタイプのスライドショーを作れるので、気になる方はぜひチェックしてみてください。

jCarousel

関連記事

  1. intence

    JavaScript

    インタラクティブなナビゲーションスクロールバーのJSライブラリ「intence」

    intenceはスクロール中のエリアが分かるインタラクティブなナビゲー…

  2. CaptionerJs

    JavaScript

    画像に開閉できるキャプションを実装できるjQueryプラグイン「CaptionerJs」

    CaptionerJsは画像に開閉できるキャプションを実装することがで…

  3. JavaScript

    サイドからスライド開閉するレスポンシブメニューのjQueryプラグイン「Material Menu」…

    Material Menuはサイドからスライド開閉するレスポンシブ対応…

  4. jQuery Inline Footnotes

    JavaScript

    ホバーで脚注を表示できる「jQuery Inline Footnotes」

    jQuery Inline Footnotesはホバーすることで脚注の…

  5. Tosrus

    JavaScript

    スマホやタブレットにも対応するLightbox風のjQueryプラグイン「Tosrus」

    TosrusというjQueryプラグインを使えば、スワイプやスクロール…

  6. Textillate.js

    JavaScript

    テキストに面白いCSS3アニメーションを加えることができるjQueryプラグイン「Textillat…

    指定したテキストに面白いCSS3アニメーションを加えることができるjQ…

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP