RSSを購読する
follow us in feedly
ふかふか交易所 | ネットの情報をわかりやすくお届け!
RSSを購読する
follow us in feedly

ニュータウンシリーズ まとめ

マインクラフト関連記事 まとめ

VR関連記事 まとめ

トップ ゲーム 動画 ホームページ 掲示板 お問い合わせ サイトマップ ページ下部へ

ホームページカテゴリ 新着記事

サイト内検索

過去7日間の人気記事

  • 総合
  • ゲーム
  • 動画
  • ホームページ

ホーム > ホームページカテゴリー No.21 ~ No.30 > 記事No.30

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

← 前の記事

次の記事 →

oveflow_ellipsis

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


▼実装例

※こちらは以前紹介した記事の続きの記事となります。

既にjQueryによるスライドショーが設置できている事が前提となりますので、初めてスライドショーを設置する方は、

超簡単!ホームページにスライドショー機能を実装する方法(JQuery)

の記事からお読みください。


htmlへの記述

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


CSS文の記述

スライドショーを設置しているhtmlの<head></head>内に、サムネイルのスタイルを整えるために以下のcss文を張り付けて ください。

サムネのスタイルは必要に応じて変更してください。


javascriptの記述

<head></head>内に記述されているスライドショーのjavascript部分、

$('.bxslider').bxSlider({

から

});

までの中に、以下の分を記述してください。

このimg srcで各スライドと対応させるサムネ画像を読み込みます。必要に応じて"width"と"height"でサムネの 大きさを調整してください。

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


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

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

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

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

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


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


関連記事はこちら


  ■ 一言コメントをどうぞ!(100字まで)


過去7日間の人気記事

マインクラフト関連記事 まとめ

VR関連記事 まとめ

Aviutl(動画編集)関連記事まとめ

AR関連記事 まとめ

ご意見・ご質問等は 掲示板へ!

コメントを公開されたくない場合は メッセージフォームへ!


当サイトについて  月極広告の募集

©Copyright fukafuka295.jp 2016 All rights reserved.

トップ ゲーム 動画 ホームページ 掲示板 お問い合わせ サイトマップ ページ上部へ