jQueryで画像のスライドショーを実装できるプラグインは色々ありますが、
今回「FlexSlider 2」を使用してみたので、設定方法をメモします。
スライドショーさせる画像を用意し、jQueryで指定すれば
簡単に画像のスライドショーを実現することができます
下記にjQueryのプラグイン「FlexSlider 2」を使用して、
複数の画像をスライドショーさせた時の方法をメモします。
■ 「FlexSlider 2」を使用したスライドショーの使用方法
※下記、基本的な設定方法です。
下記URLより、「FlexSlider 2」をダウンロードします。
http://flexslider.woothemes.com/
【読み込むファイル】
jQueryと各ファイルを読み込みます。
<link rel="stylesheet" type="text/css" href="./flexslider.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script type="text/javascript" src="./jquery.flexslider.js"></script>
【JS】
クラスを指定し「flexslider」を使用します。
<script type="text/javascript">
$(function() {
$('.flexslider').flexslider({
animation: "slide",
slideshowSpeed: 5000
});
});
</script>
画像をスライドさせる為に「animation: “slide”」を指定します。
animationは「slide」と「fade」で設定することが可能です。
スライドショーのスピード（間隔）を「slideshowSpeed: 5000」で設定しています。
他にも設定は色々あります。
ページ下部に一部記載します。
【HTML】
スライドショーをさせる要素に「class=”flexslider”」を記述します。
<div class="flexslider"> <ul class="slides"> <li> <a href="https://www.google.co.jp/"><img src="./img/sample1.jpg" /></a> </li> <li> <img src="./img/sample2.jpg" /> <p>キャプション</p> </li> <li> <img src="./img/sample3.jpg" /> </li> <li> <img src="./img/sample4.jpg" /> </li> </ul> </div>
画像にリンクを貼る場合は、画像にaタグを指定すればリンクを貼ることが可能です。
また、キャプションを付ける場合はimgタグの箇所にpタグで指定します。
上記の設定をするだけでスライドショーを行えます。
スタイルがデフォルトの状態なので、デザインを変更する場合はCSSで調整します。
他にも色々なカスタマイズをすることが可能です。
| オプション | 内容 |
|---|---|
| animation | スライドの種類を設定します。「fade」か「slide」で指定します。 |
| direction | スライドの方向を設定します。横の場合「horizontal」、縦の場合「vertical」で指定します。 |
| reverse | 逆方向にスライドさせる場合は「true」を指定します。 |
| animationLoop | スライドをループさせるかを設定します。ループさせない場合は「false」を指定します。 |
| slideshow | 自動でスライドショーを行うかを設定します。手動にする場合は「false」を指定します。 |
| slideshowSpeed | スライドショーのスピード（間隔）を設定します。 |
| animationSpeed | アニメーションのスピードを設定します。 |
| randomize | ランダムでスライドショーをさせる場合は「true」で設定します。 |
| controlNav | ページャーを表示するかを設定します。表示しない場合は「false」を指定します。 |
| directionNav | 次へと前へのナビゲーションを表示するかを設定します。表示しない場合は「false」を指定します。 |
| prevText | 前へナビゲーションのテキストを指定します。 |
| nextText | 次へナビゲーションのテキストを指定します。 |
※上記は一部のオプションです。
他にも色々なオプションがあるので、様々なカスタマイズができそうです。
ぜひ、試してみてください。