ゲマステ!- 新作ゲームレビュー, マイクラ, ゲームMOD情報まとめ

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

※ 記事内にアフィリエイト広告が含まれています

HP・ブログ関連

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

2019年4月9日  

ホームページやブログに設置した「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」の以下の部分を調整してください。

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

no image
お問い合わせフォーム

不明点に関するご質問、記事の執筆・掲載依頼などについては、こちらのフォームより気軽にお問合せください。 極力、12時間以内には回答いたします。 ふかふかEnglish OK! 当サイトのPV・UUデー ...

続きを見る

この記事をシェアする

関連コンテンツ

  • この記事を書いた人

ふかふか

SNSフォロワー13万人以上、ウェブコンテンツクリエイターとして活動しています!国内・海外の多数の企業と提携し、年間250以上のガジェットレビューを行っています。見やすく・分かりやすくがモットー!

-HP・ブログ関連
-, , , , , , , , , ,

Copyright© ゲマステ!- 新作ゲームレビュー, マイクラ, ゲームMOD情報まとめ , 2024 All Rights Reserved Powered by AFFINGER5.