[JS]よく使う機能だけに絞り込んだ、シンプルなカルーセルのスクリプト -bxCarousel

画像をはじめさまざまなHTML要素をスライド表示させるカルーセルのスクリプトを紹介します。

下記のデモでは、Example One(表示数4、移動数2、手動操作)、Example Two(表示数3、移動数1、自動操作)となっています。

デモのキャプチャ

bxCarousel
デモ

カルーセルの実装はシンプルなリスト要素です。

HTML

リスト内には画像・テキストなど、さまざまなHTML要素を配置できます。

スクリプトのオプションでは下記の項目を設定できます。

  • 目に見えるエレメント数(表示数)
  • 一度の操作でスライドするエレメント数(移動数)
  • スライドのスピード
  • 手動と自動の切り替え
  • 自動時のタイミング
  • 自動時のスライド方向
  • 手動時のコントローラーのテキストや画像
  • コントローラーの有無

sponsors

top of page

©2018 coliss