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

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

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

VR関連記事 まとめ

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

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

サイト内検索

過去7日間の人気記事

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

ホーム > ホームページカテゴリー No.1 ~ No.10 > 記事No.3

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

← 前の記事

次の記事 →

スライドショー

自分のホームページに画像がどんどん移り変わるスライドショー機能を追加して賑やかにしたい! という方々のために今回、超簡単にスライドショーを設置する方法をご紹介します!

ちなみに導入に成功するとこのようなスライドショーが実装されます(GoogleChrome, IE11, IOS動作確認)


導入方法

まずは「bxSlilder」さんのサイトで配布されている JQueryのプラグインファイルをダウンロードしてください(画像の赤枠部分からダウンロード)

「jquery.bxslider.zip」というzipフォルダをダウンロードしたら解凍してください。するといくつかファイルとフォルダが出てくると思いますが、今回はその中の「jquery.bxslider.css」「jquery.bxslider.min.js」「images」 の3つのみを使用するので、この3つを任意の場所(パス)に置いてください。


そうしたら次に、スライドショーを適用したいページのHTMLの<head></head>内に以下のコードを貼り付けてください。


※重要!!
上のコード2,3行目の「jquery.bxslider.min.js」「jquery.bxslider.css」のパスは、ご自身がファイルを置いた場所のパスにそれぞれ変更してください。

「パスってなに?」という方はコチラ↓

ホームページの『パス』の指定方法について分かりやすく解説


これでスライドショー機能を付与するJQueryの呼び出しは完了しました!


次はスライドショーで流す画像の設定です。

スライドショーを設置したいHTMLの設置したい箇所に以下のようにコードを書き込んでください。


これで終わりです


・・・は?( ゚д゚)


これで終わりです(迫真)


そう、これだけの手順で上のサンプルで示したようなスライドショーを設置することができるのです。とても簡単ですね!


スライドショーオプションの適用

このbxSliderのスゴイところは、スライドの方法や速度など、細かい設定(オプション)を自分でカスタマイズできるところなのです!

スライドショーオプションの適用方法と、その種類に関しては以下の記事で解説しているので、是非参考にしてみてください。

関連:[bxSlider]スライドショーオプションの記述方法と使い方まとめ


不具合への対処法

対処法についてまとめた記事へ

  • 設置はできたがスライドショーが動かない
  • 配置した画像がバラけてしまう
  • スライドショーに不自然な余白ができてしまう

などの問題の対処法についてまとめた記事を書きました。是非参考にしてみてください。

参考:

[Bxslider]スライドショーが正常に動作しない、設置できない場合の対処法まとめ

[bxSlider]スライドショー読み込み時に画像が一瞬バラけてしまう場合の超簡単な対処法


左右のページ送りボタンが表示されない場合

「jquery.bxslider.css」ファイルを開き、「DIRECTION CONTROLS (NEXT / PREV)」の部分(107行目~) を見てみてください。

左右の送りボタンはダウンロードしたzipの中の「images」フォルダの中にある 画像ファイルから読み込んでいます。

その画像ファイルは「jquery.bxslider.css」の以下の赤枠で囲った部分で読みだしているのですが、 ボタンが表示されない場合は、この部分がボタン画像を置いた部分のパスと異なっている可能性があります。 一度確認してみて、正しいパスに直してください



画像選択ボタン(したにある●)の位置や色を変更したい場合

「jquery.bxslider.css」ファイルを開き、「PAGER」の部分(68行目~) を見てみてください。

画像の赤枠で示した通り、この行では選択ボタン(PAGER)の設定を行っています。

PAGERの色を変更したい場合は色コードを変えれば良いですし、位置を変えたい場合は 一番上の赤枠内に「position: relative」等を適用すれば自由に変更できます


みなさんも是非ご自身のホームページにスライドショー機能を実装してみてはいかかでしょうか。見栄えの良いホームページになること間違いなしです!!


※(2016/06/07) スライドショーがうまく動作しない場合の対処法についてまとめた記事を書きました。

[Bxslider]スライドショーが正常に動作しない、設置できない場合の対処法まとめ

※(2016/10/29) ページ読み込み時に、スライドショーの画像が一瞬バラけてしまう場合の対処法について、記事を書きました。

[bxSlider]スライドショー読み込み時に画像が一瞬バラけてしまう場合の超簡単な対処法


関連記事はこちら

この記事に対するコメント

Comment Box is loading comments...

過去7日間の人気記事

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

VR関連記事 まとめ

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

AR関連記事 まとめ

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

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


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

©Copyright fukafuka295.jp 2016 All rights reserved.

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