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

NO IMAGEフェード、スライド、水平、垂直などカスタマイズ性の高いスライダー「Prrple Slider」前のページ

コンテナにテキストをフィットさせれるjQueryプラグイン「textfit.js」次のページtextfit.js

関連記事

  1. zelect

    JavaScript

    セレクトボックスをカスタマイズして使いやすくしてくれる「zelect」

    zelectはセレクトボックスをユーザーが使いやすくなるようにカスタマ…

  2. share-this

    JavaScript

    テキストを選択してシェアできるMediumライクな「share-this」

    share-thisはテキストを選択して手軽にTwitterやFace…

  3. iziToast

    JavaScript

    エレガントでレスポンシブに対応したトーストを実装できる「iziToast」

    iziToastは、エレガントでレスポンシブに対応した軽量のトーストを…

  4. awNotices

    JavaScript

    スタート・ストップ機能がついたシンプルなjQueryニュースティッカー「awNotices」

    awNoticesはスタート・ストップ機能がついたシンプルに切り替わる…

  5. iziModal

    JavaScript

    エレガント・レスポンシブ・フレキシブルでそのうえ軽量なモーダルウィンドウ「iziModal」

    iziModalはエレガント・レスポンシブ・フレキシブルなモーダルウィ…

  6. jquery.datepicker

    JavaScript

    未来的なデータピッカーを実装できる「jquery.datepicker」

    jquery.datepickerはWeb用の未来的なデータピッカーを…

最近の記事

  1. 岩木山
  2. パーソナルパーティション

アーカイブ

PAGE TOP