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

    立体的なナビゲーション表示を実装することができるjQueryプラグイン「Box Lid」

    立体的なナビゲーション表示を実装できるjQueryプラグイン「Box …

  2. Scrollgress

    JavaScript

    スクロールに連動するプログレスバーを実装できる「Scrollgress」

    Scrollgressはスクロールに連動するシンプルで軽量なプログレス…

  3. JavaScript

    シンプルで軽量のレスポンシブなjQueryスライダー「ResponsiveSlides.js」を使っ…

    とてもシンプルで使いやすそうなレスポンシブのjQueryスライダー「R…

  4. Custom Carousel

    JavaScript

    カードスタイルのカルーセル・スライダー実装「Custom Carousel」

    Custom Carouselはカードスタイルによるシンプルなカルーセ…

  5. swingdrag

    JavaScript

    jQuery UIのドラッグ機能にスイング効果を加えることができる「swingdrag」

    swingdragは、jQuery UIのドラッグ機能にスイング効果を…

  6. no-image

    JavaScript

    テキストリンクをタイピングアニメーションで表示するjQueryプラグイン「jTyper」

    jTyperはテキストリンクをタイピングアニメーションで表示できるjQ…

最近の記事

  1. cheero Smart USB Charger 48W CHE-320
  2. ブエノカフェ CM-200

アーカイブ

PAGE TOP