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

    ぼかし背景を画像から作成できるjQueryプラグイン「Blurr」

    BlurrというjQueryプラグインを使えば、ぼかし背景を画像から簡…

  2. Micromodal.js

    JavaScript

    アクセシブルで軽量なモーダルダイアログを実装できる「Micromodal.js」

    Micromodal.jsは、アクセシブルでファイル容量も軽量なモーダ…

  3. formBuilder

    JavaScript

    ドラッグ&ドロップでフォームを手軽につくれる「formBuilder」

    formBuilderはドラッグ&ドロップでフォームを手軽につくること…

  4. Material Design Responsive Table
  5. jQuery googleslides
  6. Swipebox

    JavaScript

    スマホやタブレットのスワイプにも対応したLightboxを実装できるjQueryプラグイン「Swip…

    今後かなり需要がありそうなjQueryプラグインがあったので使い方も兼…

最近の記事

  1. 芳醇な香りのラムレーズンサンド
  2. Aモーニングセット
  3. 白トリュフの塩パンやメロンパンなど
  4. 東京都現代美術館
  5. スーリア バターチキン

アーカイブ

PAGE TOP