スライドショー

以前はトップページに動きのあるビジュアルを載せる方法と言えばFlashが一般的でしたが、スマホが対応しなくなったのを機に、jQueryによるスライドショー(スライダー)がよく使われるようになりました。
ここではその中でも最も普及していると思われるbxSliderの設置方法を解説します。

1.公式サイトに行き「Download」ボタンをクリックしてファイル一式をダウンロードします。

2.フォルダを解凍し、 jquery.bxslider.min.jsをテンプレートの「js」フォルダへ、jquery.bxslider.cssを「css」フォルダへ移動します。

3.トップページ(index.html)の<head>内に下記を書き、bxSliderのCSSを読み込みます。
※jQuery(jquery.min.js ) はすでにテンプレートに読み込み済みなので省略しています。

<link href="css/jquery.bxslider.css" rel="stylesheet">

4.トップページ(index.html)の<div class="topimage">~</div>を下記のコードで上書きします。

<div class="topimage">
<ul class="bxslider">
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
</ul>
</div>

5.cssフォルダのstyle.cssのスマホ用設定.topimageを下記のコードで上書きします。

.topimage{
width: 100%;
margin: 0 auto;
}
.bxslider {margin: 0px; padding: 0px;}
.bxslider li {list-style-type: none;}

6.同じくstyle.cssのPC用設定.topimageを下記のコードで上書きします。

.topimage {
width: 920px;
height: 340px;
margin: 0 auto 20px;
}

7.トップページ(index.html)の</body>より上に下記を書き、bxSliderのJavaScriptを読み込みます。 。

<script src="js/jquery.bxslider.min.js"></script>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
speed: 1000,
pause: 6000,
pager: false
});
});
</script>

8.imagesフォルダを作り、横幅920ピクセル縦340ピクセルのJPEG画像を4枚用意し、それぞれ1.jpg~4.jpgと名前を付け、imagesフォルダに入れます。

9.このように表示されればOKです。

画像の余白を消したい場合は、cssフォルダ内jquery.bxslider.cssの.bx-wrapper {~}を削除します。
スライドのスピードを変えたり、フェードイン・フェードアウトなども可能です。詳しくはこちらのサイト等を参考にカスタマイズしてみてください。