Stinger3カスタマイズ「JQueryスライドショーbxSlider」を入れてみよう。

トップページに動的コンテンツを入れると画面が華やいでみえますよね。今回は「Java Script」のスライダーを埋め込んでみたいと思います。このページのトップにも使っています。

用意するもの

 bxSlider

画面右上の「Download」からjquerybxslider.zipをダウンロードします。
※この記事を書いている時点でのレイアウトですので、DLの場所が変わる場合もあります）

これらをWORDPRESSindex.php同階層に「js」フォルダを作り、その中にアップロードします。

index.php
js/images/
js/plugind/
js/bower.json
js/jquery.bxslider.css
js/jquery.bxslider.js
js/jquery.bxslider.min.js
js/readme.md

このような感じになります。

それとindex.phpと同じ階層に「img」フォルダを作り
s001.jpg
s002.jpg
s003.jpg
をテスト用に作り「img」フォルダ内にアップロードしておきます。
※横幅は542ピクセルで作ってみてください。

Stringer3のカスタマイズ

home.phpを編集します。
一行目の

<?php get_header(); ?>

の直後の２行目から下記ソースを記入

<!--slider-->
<link rel="stylesheet" href="./js/jquery.bxslider.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="./js/jquery.bxslider.min.js"></script>
<div id="slider1">
<div><img src="img/s001.jpg" title="01" alt="01"></a></div>
<div><img src="img/s002.jpg" title="02" alt="02"></a></div>
<div><img src="img/s003.jpg" title="03" alt="03"></a></div>
</div><!--end of #slider-->
<script>
jQuery(function($){
$('#slider1').bxSlider({
auto:true,
pause:6500,
captions: true
});
});
</script>

動作サンプル

bxSliderのカスタマイズ

bxsliderはいろいろなスライド方法を設定できます。
スライダーのカスタマイズのまとめは下記サイトがまとまっていますので参考にしてみてください。

jQueryスライドショー「bxslider」の使い方まとめ

Stinger3カスタマイズ、Bxslider導入まとめ

いかがでしたでしょうか？使い方次第で様々な魅せ方ができるスライダー機能。ぜひいろいろカスタマイズして使ってみてください。