bl6.jpホームニュースレビューお出かけアプリウェブサイトMacカメラレタッチTips雑記bl6.jpファッション、写真、旅行、ガジェットなどの備忘録menuホームJavaScriptフレキシブルなカルーセルスライダーを実装できる「flexible-bootstrap-carousel」JavaScript2017.02.28フレキシブルなカルーセルスライダーを実装できる「flexible-bootstrap-carousel」flexible-bootstrap-carouselは、フレキシブルなカルーセルスライダーを実装することができるjQuery(Bootstrap)プラグインです。ブラウザサイズにより表示される画像の数も変化します。flexible-bootstrap-carousel以下のページからflexible-bootstrap-carouselの実際のデモ動作を確認できます。デモデモではカルーセルのサンプルが2タイプ用意されています。パソコンで閲覧すると3枚の画像が表示されており、3枚ごとにスライドしていきます。ブラウザ幅を縮小していくと、それに合わせて画像の数も、2枚、1枚とブラウザ幅が小さくなるごとに少なくなっていきます。スライドに関しても表示されている画像数ごとにスライドするようになります。デモページの上段のサンプルの場合は、スライダーの左右に前後スライド移動できる矢印が設置されています。下段のサンプルに関しては、スライダーの右上に前後スライド移動できる矢印が設置されているほか、ページナンバーも表示されるので、現在どの辺の位置にいるのかを把握しやすいのがいいですね。応用次第で画像ギャラリーとしても使えるし、ショッピングサイトにも使えるので、いろんなシーンで活躍してくれると思います。マークアップがシンプルでわかりやすく記述できる点もグッドです。いうわけで、フレキシブルなカルーセルスライダーを実装したいという人は、ぜひ「flexible-bootstrap-carousel」をチェックしてみてはいかがでしょうか。flexible-bootstrap-carouselのダウンロードや詳しい実装方法は以下からどうぞ。関連記事JavaScript軽量でカスタマイズ性も高いjQueryバリデーションプラグイン「Checkify」Checkifyは軽量でカスタマイズ性も高いバリデーション機能を実装で...JavaScriptスクロールで画像をクロスフェードできるjQueryプラグイン「crossfade.js」crossfade.jsというjQueryプラグインを使えば、スクロー...JavaScript超軽量で使い方もカンタンな日付ピッカー「flatpickr」flatpickrはjQueryなどのライブラリに依存することなく動作...JavaScriptスタート・ストップ機能がついたシンプルなjQueryニュースティッカー「awNotices」awNoticesはスタート・ストップ機能がついたシンプルに切り替わる...JavaScriptテキストがアニメーションで切り替わっていく「jquery-bubble-text」jquery-bubble-textは、テキストが次々に切り替わってい...JavaScriptjQueryプラグイン・2014年上半期56選まとめ気づいたら2014年も上半期が終わってしまいましたね。そんなわけで、2...検索:プロフィールbl6.jp心がときめく「モノ」や「コト」を中心に紹介しています。レビューや日記なんかも。フレール」という紅茶の専門店があり、...2020.01.27逆さでも使えるサンワのLEDつき充電式電動エアダス...サンワサプライからガス不使用で環境にやさしい充電式電動エアダスター「CD-ADE...2020.01.24銀座の無印で朝食→大人のジャムパン(月と花)→松濤...この日のスタートは銀座から。WAIT...昨日の東急プラザの続き。一日中渋谷で遊んでいたらすっかり夜になってしまった。