flexible-bootstrap-carousel

JavaScript

フレキシブルなカルーセルスライダーを実装できる「flexible-bootstrap-carousel」

flexible-bootstrap-carouselは、フレキシブルなカルーセルスライダーを実装することができるjQuery(Bootstrap)プラグインです。ブラウザサイズにより表示される画像の数も変化します。

flexible-bootstrap-carousel

デモ

デモではカルーセルのサンプルが2タイプ用意されています。パソコンで閲覧すると3枚の画像が表示されており、3枚ごとにスライドしていきます。ブラウザ幅を縮小していくと、それに合わせて画像の数も、2枚、1枚とブラウザ幅が小さくなるごとに少なくなっていきます。

また、スライドに関しても表示されている画像数ごとにスライドするようになります。

デモページの上段のサンプルの場合は、スライダーの左右に前後スライド移動できる矢印が設置されています。下段のサンプルに関しては、スライダーの右上に前後スライド移動できる矢印が設置されているほか、ページナンバーも表示されるので、現在どの辺の位置にいるのかを把握しやすいのがいいですね。

応用次第で画像ギャラリーとしても使えるし、ショッピングサイトにも使えるので、いろんなシーンで活躍してくれると思います。マークアップがシンプルでわかりやすく記述できる点もグッドです。

というわけで、フレキシブルなカルーセルスライダーを実装したいという人は、ぜひ「flexible-bootstrap-carousel」をチェックしてみてはいかがでしょうか。

flexible-bootstrap-carousel

関連記事

  1. jQueryTween

    JavaScript

    軽量で軽快なアニメーションをするjQueryプラグイン「jQueryTween」

    jQueryTweenは軽量で軽快なアニメーションを実装することができ…

  2. Page Stack Navigation

    JavaScript

    ページをスタッキングできる「Page Stack Navigation」

    Page Stack Navigationはページをスタッキングできる…

  3. photowall

    JavaScript

    Google画像検索のようにサムネイル画像をクリックするとスライド表示されるjQueryプラグイン「…

    Google画像検索のようなアニメーションを実装することができるjQu…

  4. Images grid

    JavaScript

    画像のグリッドレイアウトを製作できるjQueryプラグイン「Images grid」

    Images gridは画像のグリッドレイアウトを製作するためのシンプ…

  5. CaptionerJs

    JavaScript

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

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

  6. no-image

最近の記事

  1. プラスシェル シティ04 フォールディングカメラケース
  2. enerpad AC-27KS
  3. KMS-160

アーカイブ

PAGE TOP