jQueryのプラグインで画像のスライドショーを実装できるものは色々あります。

今回はスライダーができるjQueryのプラグイン「FlexSlider 2」をご紹介します。

機能も充実しており、レスポンシブにも対応してます。
カスタマイズも色々とできるのでオススメのプラグインです。

「FlexSlider 2」の設置方法

下記のサイトから「FlexSlider 2」をダウンロードします。

FlexSlider 2

ファイル読込

jQueryとダウンロードしたファイルを読み込みます。

HTML

スライドさせる画像を用意し、下記のように記述します。

JS

要素を指定し、スライダーの設定をします。
下記は画像をスライドさせる設定にしてます。

上記の設定をすれば、基本的な画像のスライドショーを実装することができます。
他にもサムネイル画像や動画などを表示させることも可能です。

サンプル

「FlexSlider 2」のデモページ

「FlexSlider 2」の基本的なオプション

オプションを使用するとスライドの種類やスピードなど、細かく設定することが可能になります。

animation

スライドの仕方をフェード「fade」かスライド「slide」で指定します。

direction

スライドの方向を横スライド「horizontal」か縦スライド「vertical」で指定します。

animationLoop

画像を繰り返しループさせるかを指定します。

slideshowSpeed

スライドのスピードを指定します。

animationSpeed

アニメーションのスピードを指定します。

他にも様々なオプションが用意されております。

まとめ

オプションが多くカスタマイズが色々できるので、様々な要望にも応えることができます。
とても使いやすいプラグインです。

サイトに動きを出したい場合などに画像のスライドショーを組み込むのもいいと思います。
また、ショップサイトなどでは新商品やおすすめ商品をPRするなど、色々な使い方が可能です。