機種別ハイスコア(80点~)タイトルを見る

スマホで高画質なPCゲームをプレイ可能!

事前登録で1~2ヶ月間無料 + 半年間の料金が半額に!

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

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

2019年4月7日

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

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

previous arrow
next arrow
Slider

▼こちらのスライドショーもおすすめ!

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

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

続きを見る

2枚の画像を比較するのに便利な『比較用スライドショー』を超簡単に設置する方法を紹介!

以前の記事で、ホームページに普通のスライドショーを設置する方法について紹介しました。 [blogcard url="https://fukafuka295.jp/homepage-slideshow- ...

続きを見る

職業ユーチューバーにオススメ!

会社員・個人事業主・法人代表者のいずれでも発行可能

アメリカン・エキスプレス®
・ビジネス・カード

当サイトからの入会で
初年度の年会費0円(無料)

20歳から入手可能な一流ゴールドカード

会社員・個人事業主・法人代表者のいずれでも発行可能

アメリカン・エキスプレス®
・ビジネス・ゴールド・カード

当サイトからの入会で
初年度年会費0円(無料) 3万ポイント

スライドショーの簡単な設置方法

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
});
});
</script>

重要!!

上のコード2,3行目の「js/jquery.bxslider.min.js」「css/jquery.bxslider.css」のパスは、ご自身がファイルを置いた場所のパスにそれぞれ変更してください。ここが正しくない場合、スライドショーは動作しません。

※『パス』とはファイルを置いた場所を指定する文字列のことです。

 

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

 

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

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

<ul class="bxslider">
<li><img src="表示したい画像のパス"></li>
<li><img src="表示したい画像のパス"></li>
<li><img src="表示したい画像のパス"></li>
<li><img src="表示したい画像のパス"></li>
<li><img src="表示したい画像のパス"></li>
</ul>

 

これで終わりです

 

・・・は?( ゚д゚)

 

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

 

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

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

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

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

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

以前の記事で、サイト上に「bxSlider」のスライドショーを設置する簡単な方法について解説しました。 [blogcard url="https://fukafuka295.jp/homepage-s ...

続きを見る

不具合への対処法

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

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

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

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

以前の記事で、サイト上に「bxSlider」のスライドショーを設置する簡単な方法について解説しました。 しかし実際にスライドショーを設置した方々から、スライドショーを読み込む際に、一瞬画像がバラバラに ...

続きを見る

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

以前このサイトの記事にて、jQueryで動作するスライドショー「bxSlider」の簡単な設置方法について解説しました。 [blogcard url="https://fukafuka295.jp/h ...

続きを見る

2020年9月現在のトップセールス

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

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

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

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

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

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

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

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

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

ゲームも仕事も快適に!

2020年9月時点:最も人気なゲーミングPCはこちら

スマホで高画質なPCゲームをプレイ可能!
2020年7月末までの登録
最大61日間全ユーザー無料
2020年7月末までの登録で、最大61日間全ユーザー無料

関連コンテンツ

機種別ハイスコア(80点~)タイトルを見る

機種別ハイスコア(80点~)タイトルを見る

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

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