jQuery

【jQuery】プラグインを使ってカルセールを実装する方法

画像がスライドするデザインはよく見かけますが、プラグインを使用すると簡単に実装することができるんですね。
スライダーとも呼ばれますが、Webではこのような動きのことをカルーセルと呼ばれるようです。
今回は、Webサイトでよく見るカルーセルを実装する方法についてまとめてみました。
 

 

プラグイン「Bxslider」でカルーセルを実装

カルーセルを実装できるプラグインはたくさんありますが、中でも簡単そうだなと思ったのが、bxsliderです。

  • レスポンシブ対応
  • 豊富なオプション

とりあえず初学者でも簡単に実装できそうだなと思ったので試しにやってみました。

See the Pen
OeVgVy
by kei (@kei_01011)
on CodePen.


実装する方法として、bxsliderの公式ページに簡単な方法が書かれています。
 
<head>要素に、スタイルシートの読み込みと、jQueryの読み込みを記述します。
ダウンロードせずに読み込み先を指定する「CDN」の場合は以下のようになります。

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
</head>

 
データをダウンロードして読みこむ場合は、以下のようになります。

<script src="/js/jquery.bxslider.min.js"></script>
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

どちらでもOKだと思いますが、個人的にはCDNの方が手間が少ないのでいいかと思いました。
あとは、divやulでスライドさせたい要素を作り、クラス名をつけます。

<div class="slider">
 <div>I am a slide.</div>
 <div>I am another slide.</div>
</div>

 
最後に、javascriptで以下の記述をすれば完成です。

$(document).ready(function(){
  $('.slider').bxSlider();
});

 
カルーセルのオプションについては、javascriptの中に記述していきます。

$(document).ready(function(){
      $('.bxslider').bxSlider({
        speed:1000,//スピード 1000ミリ秒
        auto:"true", //自動スライド
        pause:5000, //自動スライドの待ち時間
        autoHover	:"true", //マウスホバーで自動スライドストップ
      });
    });

自動スライドにしたり、スライドの時間を変更したり、マウスホバーしたときにスライドをストップしたりと、様々な動作をつけることができます。
 
オプションについてはこちらのサイトがわかりやすくて参考になりました。

 

まとめ:プラグインは初学者でも簡単に実装できた

bxsliderが特別簡単だっただけかもしれませんが、すごく簡単に実装できたと思います。
カルーセルが実装できたことで、今まで難しそうと思っていたWebサイトも作れるような気がしてきました。
 
これまで学んだjQueryを使って、簡単なサイトを作ってみてもいいかもしれませんね。