ホームページやブログに設置した「bxslider」のスライドショーに簡単なカスタマイズを施して、 下に各スライドの画像が表示される"サムネイル付き"のスライドショーにする方法について解説します！
▼実装例（このようなデザインのスライドショーが設置できます）
既にjQueryによるスライドショーが設置できている事が前提となりますので、初めてスライドショーを設置する方は、以下の記事を参考にスライドショーを設置しておいてください。
-
-
超簡単！ホームページにスライドショー機能を実装する方法(JQuery)
自分のホームページに画像がどんどん移り変わるスライドショー機能を追加して賑やかにしたい！ という方々のために今回、超簡単にスライドショーを設置する方法をご紹介します！ ちなみに導入に成功すると↓このよ ...
続きを見る
htmlへの記述
すでに「bxslider」のスライドショーが設置出来てる方はhtmlの＜head＞＜/head＞内に スライドショーに関する記述があると思いますが、その部分を少し付け足してサムネイル付きにしていきます。
▼まだスライドショーを設置できていない方は、以下の記事を参照してください。
-
-
超簡単！ホームページにスライドショー機能を実装する方法(JQuery)
自分のホームページに画像がどんどん移り変わるスライドショー機能を追加して賑やかにしたい！ という方々のために今回、超簡単にスライドショーを設置する方法をご紹介します！ ちなみに導入に成功すると↓このよ ...
続きを見る
CSS文の記述
スライドショーを設置しているhtmlの＜head＞＜/head＞内に、サムネイルのスタイルを整えるために以下のcss文を張り付けて ください。
<style type="text/css">
.bx-wrapper .bx-pager {
bottom: -95px;
}
.bx-wrapper .bx-pager a {
border: solid #ccc 1px;
display: block;
margin: 0 5px;
padding: 3px;
}
.bx-wrapper .bx-pager a:hover,
.bx-wrapper .bx-pager a.active {
border: solid #5280DD 1px;
}
.bx-wrapper {
margin-bottom: 50px;
}
</style>
サムネのスタイルは必要に応じて変更してください。
javascriptの記述
＜head＞＜/head＞内に記述されているスライドショーのjavascript部分、
$('.bxslider').bxSlider({
から
});
までの中に、以下の分を記述してください。
buildPager: function(slideIndex){
switch(slideIndex){
case 0:
return '<img src="スライド画像のパス" width="150" height="100">';
case 1:
return '<img src="スライド画像のパス" width="150" height="100">';
case 2:
return '<img src="スライド画像のパス" width="150" height="100">';
}
}
このimg srcで各スライドと対応させるサムネ画像を読み込みます。必要に応じて"width"と"height"でサムネの 大きさを調整してください。
※スライドの枚数に合わせてサムネの数も増やしてください。
以上でサムネイルを設置する作業は完了です！
各サムネが正常に機能しているか確認してみてください。
左右のページ送りボタンがずれてしまう場合
サムネイルを設置した場合、左右のページ送りボタンが上下にずれてしまう場合があります。
その場合は、スライドショーのスタイルを読み込んでいる「jquery.bxslider.css」の以下の部分を調整してください。
※スライドショーの設置に関して、どうしてもうまくいかない場合はお問い合わせフォームよりご相談ください。
-
-
お問い合わせフォーム
不明点に関するご質問、記事の執筆・掲載依頼などについては、こちらのフォームより気軽にお問合せください。 極力、12時間以内には回答いたします。 ふかふかEnglish OK! 当サイトのPV・UUデー ...
続きを見る
