ゲマステ!- Gamers Station

ゲーマーズステーション | ゲームを中心に、動画・ブログ制作などのネットコンテンツ全般からレビュー情報まで分かりやすく紹介

HP・ブログ関連 ガジェット・ツール

ホームページにサムネイル付きスライドショーを簡単に設置する方法(jQuery)

2019年4月9日

ホームページやブログに設置した「bxslider」のスライドショーに簡単なカスタマイズを施して、 下に各スライドの画像が表示される"サムネイル付き"のスライドショーにする方法について解説します!

▼実装例

既にjQueryによるスライドショーが設置できている事が前提となりますので、初めてスライドショーを設置する方は、以下の記事から読んでください。

htmlへの記述

すでに「bxslider」のスライドショーが設置出来てる方はhtmlの<head></head>内に スライドショーに関する記述があると思いますが、その部分を少し付け足してサムネイル付きにしていきます。

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"でサムネの 大きさを調整してください。

※スライドの枚数に合わせてサムネの数も増やしてください。

以上でサムネイルを設置する作業は完了です!各サムネが正常に機能しているか確認してみてください。

※もしjavascript部分の記述がわからないという方は、右クリック→"ページのソースを表示"で このページの記述を参考にしてみてください。

左右のページ送りボタンがずれてしまう場合

サムネイルを設置した場合、左右のページ送りボタンが上下にずれてしまう場合があります。

その場合は、スライドショーのスタイルを読み込んでいる「jquery.bxslider.css」の以下の部分を調整してください。

※スライドショーの設置に関して、どうしてもうまくいかない場合はお問い合わせフォームよりご相談ください。

-HP・ブログ関連, ガジェット・ツール
-, , , , , , , , , ,

Copyright© ゲマステ!- Gamers Station , 2019 All Rights Reserved.