dbpas / dbpasCarousel

カルーセルとは、画像やテキストなどのコンテンツを横にスライドさせながら表示させるWebデザインです。Amazonや楽天などのECサイトでもよく見られますね。

カルーセルを実装するjQueryプラグインやJavascriptはいろいろなサイトで多数紹介されていますが、ここではおなじみの<ul>要素を自動的にカルーセルに変換して表示してくれるjQueryプラグイン『dbpasCarousel』を紹介します。

サンプルをご覧下さい。

「ul要素を簡単にカルーセルに変換してくれるjQueryプラグイン『dbpasCarousel』サンプル」

設定もいたって簡単。jQueryを読みこませて、<ul>タグと<li>タグを利用してリスト表示で記述するだけです。

では使用方法をみてみましょう。


まずはこちらのサイト(dbpasCarousel)からファイルをダウンロードします。

<head>部分に、ダウンロードしたCSSファイルとjQueryファイルを読みこませる記述をします。

あとは、<ul>タグを利用してリスト表示を記述します。

以上でリスト表示をカルーセルに変換してくれます。とても簡単で便利ですね。

また<li>タグ内で<div>で囲ってあげると、さらに凝ったコンテンツをカルーセルにすることが出来ます。

オプションは以下の通りです。
● itemsVisible … 表示させるコンテンツの数(初期値 2)
● slideDelay … スライドさせるアニメーションのスピード(初期値 500)
● autoSlide … オートでスライドさせるには、1を設定(初期値 0)
● autoDelay … オートでスライドさせるときの切り替えるスピード(初期値 5000)
● hoverPause … マウスがのった時にストップさせる(初期値 1)
● imgCaption … イメージのALTをキャプションにする(初期値 1)

サンプルのソースを書いておきます。どうごご参考まで。

この記事と関連してると思われる記事: