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

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

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

サンプルをご覧下さい。

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

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

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

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

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

<link rel="stylesheet" type="text/css" href="css/jquery.dbpas.carousel.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/jquery.dbpas.carousel.js"></script>
<script>
    $(document).ready(function() {
      $('ul').dbpasCarousel({オプション});
    });
</script>

$(document).ready(function() {

$('ul').dbpasCarousel({オプション});

});

</script>

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

<ul>
  <li><img src="images/01.jpg" /></li>
  <li><img src="images/02.jpg" /></li>
  <li><img src="images/03.jpg" /></li>
  <li><img src="images/04.jpg" /></li>
  <li><img src="images/05.jpg" /></li>
  <li><img src="images/06.jpg" /></li>
</ul>

<ul>

</ul>

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

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

  <ul>
    <li>
      <div>
        <h3>Paragraph 1</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan sapien congue, iaculis sem at, blandit tortor. Vestibulum eget orci a leo mattis commodo ut quis diam. Nullam porttitor tempus nunc, ac luctus lectus euismod eget. Vestibulum vestibulum neque vel enim condimentum consequat. Mauris gravida eros sapien, id bibendum nunc vulputate quis. Nam facilisis turpis ligula, vitae bibendum elit adipiscing ac. Phasellus id lectus varius, imperdiet urna vitae, ornare est.
        </p>
      </div>
    </li>
    <li>
      <div>
        <h3>Paragraph 2</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan sapien congue, iaculis sem at, blandit tortor. Vestibulum eget orci a leo mattis commodo ut quis diam. Nullam porttitor tempus nunc, ac luctus lectus euismod eget. Vestibulum vestibulum neque vel enim condimentum consequat. Mauris gravida eros sapien, id bibendum nunc vulputate quis. Nam facilisis turpis ligula, vitae bibendum elit adipiscing ac. Phasellus id lectus varius, imperdiet urna vitae, ornare est.
        </p>
      </div>
    </li>
    <li>
      <div>
        <h3>Paragraph 3</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan sapien congue, iaculis sem at, blandit tortor. Vestibulum eget orci a leo mattis commodo ut quis diam. Nullam porttitor tempus nunc, ac luctus lectus euismod eget. Vestibulum vestibulum neque vel enim condimentum consequat. Mauris gravida eros sapien, id bibendum nunc vulputate quis. Nam facilisis turpis ligula, vitae bibendum elit adipiscing ac. Phasellus id lectus varius, imperdiet urna vitae, ornare est.
        </p>
      </div>
    </li>
    <li>
      <div>
        <h3>Paragraph 4</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan sapien congue, iaculis sem at, blandit tortor. Vestibulum eget orci a leo mattis commodo ut quis diam. Nullam porttitor tempus nunc, ac luctus lectus euismod eget. Vestibulum vestibulum neque vel enim condimentum consequat. Mauris gravida eros sapien, id bibendum nunc vulputate quis. Nam facilisis turpis ligula, vitae bibendum elit adipiscing ac. Phasellus id lectus varius, imperdiet urna vitae, ornare est.
        </p>
      </div>
    </li>
  </ul>

<ul>

<li>

<div>

<h3>Paragraph 1</h3>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan sapien congue, iaculis sem at, blandit tortor. Vestibulum eget orci a leo mattis commodo ut quis diam. Nullam porttitor tempus nunc, ac luctus lectus euismod eget. Vestibulum vestibulum neque vel enim condimentum consequat. Mauris gravida eros sapien, id bibendum nunc vulputate quis. Nam facilisis turpis ligula, vitae bibendum elit adipiscing ac. Phasellus id lectus varius, imperdiet urna vitae, ornare est.

</p>

</div>

</li>

<li>

<div>

<h3>Paragraph 2</h3>

<p>

</p>

</div>

</li>

<li>

<div>

<h3>Paragraph 3</h3>

<p>

</p>

</div>

</li>

<li>

<div>

<h3>Paragraph 4</h3>

<p>

</p>

</div>

</li>

</ul>

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ul要素を簡単にカルーセルに変換してくれるjQueryプラグイン『dbpasCarousel』サンプル　│　ぱんにゃっと/H&Y</title>

<link rel="stylesheet" type="text/css" href="css/jquery.dbpas.carousel.css" />
    <style>
      [data-carousel-control="wrapper"] ul li {
        min-width: 185px;
      }	
      [data-carousel-name="para"] [data-carousel-control="wrapper"] ul li {
        max-width: 300px;
      }
    </style>
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script src="js/jquery.dbpas.carousel.js"></script>
  <script>
    $(document).ready(function() {
      $('ul').dbpasCarousel({
          itemsVisible: 3,
          autoSlide: 1
        });
      });
  </script>
</head>
<body>
<h1>ul要素を簡単にカルーセルに変換してくれるjQueryプラグイン『dbpasCarousel』サンプル</h1>
         <ul>
            <li><img src="images/01.jpg" /></li>
            <li><img src="images/02.jpg" /></li>
            <li><img src="images/03.jpg" /></li>
            <li><img src="images/04.jpg" /></li>
            <li><img src="images/05.jpg" /></li>
            <li><img src="images/06.jpg" /></li>
          </ul>
          
  <ul id="para">
    <li>
      <div>
        <h3>Paragraph 1</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan sapien congue, iaculis sem at, blandit tortor. Vestibulum eget orci a leo mattis commodo ut quis diam. Nullam porttitor tempus nunc, ac luctus lectus euismod eget. Vestibulum vestibulum neque vel enim condimentum consequat. Mauris gravida eros sapien, id bibendum nunc vulputate quis. Nam facilisis turpis ligula, vitae bibendum elit adipiscing ac. Phasellus id lectus varius, imperdiet urna vitae, ornare est.
        </p>
      </div>
    </li>
    <li>
      <div>
        <h3>Paragraph 2</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan sapien congue, iaculis sem at, blandit tortor. Vestibulum eget orci a leo mattis commodo ut quis diam. Nullam porttitor tempus nunc, ac luctus lectus euismod eget. Vestibulum vestibulum neque vel enim condimentum consequat. Mauris gravida eros sapien, id bibendum nunc vulputate quis. Nam facilisis turpis ligula, vitae bibendum elit adipiscing ac. Phasellus id lectus varius, imperdiet urna vitae, ornare est.
        </p>
      </div>
    </li>
    <li>
      <div>
        <h3>Paragraph 3</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan sapien congue, iaculis sem at, blandit tortor. Vestibulum eget orci a leo mattis commodo ut quis diam. Nullam porttitor tempus nunc, ac luctus lectus euismod eget. Vestibulum vestibulum neque vel enim condimentum consequat. Mauris gravida eros sapien, id bibendum nunc vulputate quis. Nam facilisis turpis ligula, vitae bibendum elit adipiscing ac. Phasellus id lectus varius, imperdiet urna vitae, ornare est.
        </p>
      </div>
    </li>
    <li>
      <div>
        <h3>Paragraph 4</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan sapien congue, iaculis sem at, blandit tortor. Vestibulum eget orci a leo mattis commodo ut quis diam. Nullam porttitor tempus nunc, ac luctus lectus euismod eget. Vestibulum vestibulum neque vel enim condimentum consequat. Mauris gravida eros sapien, id bibendum nunc vulputate quis. Nam facilisis turpis ligula, vitae bibendum elit adipiscing ac. Phasellus id lectus varius, imperdiet urna vitae, ornare est.
        </p>
      </div>
    </li>
  </ul>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>ul要素を簡単にカルーセルに変換してくれるjQueryプラグイン『dbpasCarousel』サンプル　│　ぱんにゃっと/H&Y</title>

<style>

[data-carousel-control="wrapper"] ul li {

min-width: 185px;

}

[data-carousel-name="para"] [data-carousel-control="wrapper"] ul li {

max-width: 300px;

}

</style>

$(document).ready(function() {

$('ul').dbpasCarousel({

itemsVisible: 3,

autoSlide: 1

});

</script>

</head>

<body>

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

<ul>

</ul>

<li>

<div>

<h3>Paragraph 1</h3>

<p>

</p>

</div>

</li>

<li>

<div>

<h3>Paragraph 2</h3>

<p>

</p>

</div>

</li>

<li>

<div>

<h3>Paragraph 3</h3>

<p>

</p>

</div>

</li>

<li>

<div>

<h3>Paragraph 4</h3>

<p>

</p>

</div>

</li>

</ul>

</body>

</html>

あわせてお読みください

YouTube埋め込み動画を簡単にレンスポンシブにしてくれる「SuperEmbed.js」

今やレスポンシブデザインにするのは当然の選択肢になりました。 YouTubeの動画をウェブサイトに埋め込むこともあると思いますが、動画もレスポンシブで表示させた…

要素からはみ出したテキストを省略してくれるjQueryプラグイン「jQuery.dotdotdot」

「jQuery.dotdotdot」はボックス要素からはみ出た分のテキストを自動的に省略してくれるという地味に便利なjQueryプラグインです。省略したあとに…

ビフォーアフターを簡単に紹介できるjQueryプラグイン「 jQuery Before/After Plugin」

jQuery Before/After Plugin ビフォー・アフターを画像でわかりやすくみせることが出来るのがこの「jQuery Before/After…

ぱんにゃっとTutorial

jQueryやWordPress、Webデザインに役立つ情報など

ちょっと楽しいおすすめのサンプル

月額126円(税抜)から！WordPressも使えるクラウド型高速レンタルサーバー

カテゴリー

タグ

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

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

あわせてお読みください

コメントを残すコメントをキャンセル

ぱんにゃっとTutorial

jQueryやWordPress、Webデザインに役立つ情報など

ちょっと楽しいおすすめのサンプル

人気記事ランキング

月額126円(税抜)から！WordPressも使えるクラウド型高速レンタルサーバー

カテゴリー

タグ

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

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

あわせてお読みください

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル