【jQuery】画像がコンベアのように横に流れるスライドショー【自動で繰り返し、それぞれの画像にリンクを貼ることが可】

これは画像です。下の方に実際に機能しているスライドショーを設置しています。

ブログやWebサイトに、上のようなスライドショー（スライダー、カルーセルとも呼ばれます）を設置したいと思ったことはありませんでしょうか。
以下でそのコードをご紹介致します。

画像がコンベアのように横に流れるスライドショーのCSS

上記のコードをスタイルシートに記述します。

高さ

8行目の

height:93px;

の数字を変えると、スライドの高さを変更できます。下のものは高さ177pxの少し大きめのスライドです。

回り込み

リストを横並びにするのに、

float:left;

（17行目）というコードを使っています。

「float」より、「flex」「inline-block」「table-cell」などを使用したほうが現代的（？）だと思うのですが、そうするとサイズがおかしくなったり速度がやたら速くなったりしたので「float」を使用しています。

回り込みの解除

回り込みに「float」を使用することにより回り込みの解除が必要になります。

22～31行目と、12行目の

zoom: 1;

が回り込み解除に関するコードになります（12行目はIE6、7用）。

ちなみに、IE8を切り捨てるともっとコードを短くできるのだとか。

参考　【CSS】最新のclearfixがどんどん短く。Bootstrap 2/3/4のCSSを見て

数年後にはIE8切り捨ての短いコードの方が主流になっているかも……。

画像がコンベアのように横に流れるスライドショーのjQueryのコード

スライドショーを表示させたい場所に以下のjQueryのコードを記述します。

WordPressとWordPress以外でコードが異なりますのでご注意ください。

WordPress以外のjQueryのコード

WordPress用のjQueryのコード

WordPressの場合、jQueryのカプセル化というものが必要になります。

参考　ワードプレスでjQueryがうごかない！！

共通事項

スライドショーの速度

10行目の

duration : 3000,

の数字を変えると画像がスライドする速度を変更できます。

<li></li>の間にアイテムを追加する

下の方にある「<li></li>」の間に、

<img src="画像のURL">

や、

<a href="リンク先のURL"><img src="画像のURL"></a>

と書くことにより、画像を表示させたりその画像にリンクを貼ることができます。

アイテム数に応じて、不要な「<li></li>」は削除してください。足りない場合は付け足してください。

画像がコンベアのように横に流れるスライドショーの完成

上記のコードにより、このようなスライドショーが表示されるようになります。

別のタイプのスライドショーの紹介

CSSのみで動く横スライダー

アイテム数がそれほど多くない場合はこちらでもいいかもしれません。

【CSSのみ】カルーセル、横スライドショー【自動で動く】

CSSで作るスライドショー（自動で繰り返し、フェイドイン・アウトで画像を切り替え、それぞれの画像にリンク）

上のようなスライドショーを、JavaScriptやjQueryを使わずにCSSで表示することができます。下記の記事でその方法を紹介しています。

CSSで作るスライドショー（自動で繰り返し、フェイドイン・アウトで画像を切り替え、それぞれの画像にリンク）

folder Web関連

tag スライドショー