これは簡単!手動スライド付きのカルーセルを実装する「dbpasCarousel」

「dbpasCarousel」は簡単に手動スライド付きのカルーセルを実装するjQueryプラグインです。

dbpasCarousel

screenshot345

カルーセルとは英語で”Carousel”、”回転木馬”を意味しており、動的に画像や文字などのエレメントがスライドするUIを表します。誰しもが一度は目にしたことがあるのではないでしょうか。Webサイトに多くを載せたいけど、そんなスペースは無い。そんな時にカルーセルが効果を発揮します。そんなカルーセルを簡単に実装できるのがこの「dbpasCarousel」です。

Demoのとおり、1画面に複数のカルーセルを配置することも可能です。

screenshot346

 

クリックでスライドすることも可能です。

screenshot347

 

それでは「dbpasCarousel」の実装方法をご紹介します。まずはjQuery含む外部ファイルを読み込みます。

<link rel="stylesheet" type="text/css" href="jquery.dbpas.carousel.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="jquery.dbpas.carousel.js"></script>

 

HTMLはこのようにマークアップします。イメージのカルーセルと、文字列のカルーセルをそれぞれulタグで囲み、idをつけてください。

<ul id="pics">
  <li><img src="http://lorempixel.com/100/100/abstract" alt="image 1" /></li>
  <li><img src="http://lorempixel.com/100/100/animals" alt="image 2" /></li>
  <li><img src="http://lorempixel.com/100/100/nature" alt="image 3" /></li>
  <li><img src="http://lorempixel.com/100/100/people" alt="image 4" /></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>

 

CSSはこのように指定します。HTMLでイメージ、文字列にそれぞれにつけたidでwidthを指定します。

#pics li {
  width: 100px;
}
#para li {
  width: 300px;
}

 

JavaScriptはこのように実装します。autoSlideオプションをつけることでカルーセルが実現できます。外せばスライダーとなります。

$(document).ready(function() {
  $('ul').dbpasCarousel({autoSlide: 1});
});

 

するとこのように作ることが出来ました。

screenshot348

 

とても簡単でした。オプションも複数用意されています。ぜひ参考にどうぞ。

 

Home > JavaScript > これは簡単!手動スライド付きのカルーセルを実装する「dbpasCarousel」

Return to page top