自分のホームページに画像がどんどん移り変わるスライドショー機能を追加して賑やかにしたい！ という方々のために今回、超簡単にスライドショーを設置する方法をご紹介します！
ちなみに導入に成功すると↓このようなスライドショーが実装されます(GoogleChrome, IE11, IOS動作確認)
▼こちらのスライドショーもおすすめ！
-
-
ホームページにサムネイル付きスライドショーを簡単に設置する方法(jQuery)
ホームページやブログに設置した「bxslider」のスライドショーに簡単なカスタマイズを施して、 下に各スライドの画像が表示される"サムネイル付き"のスライドショーにする方法について解説します！ ▼実 ...
続きを見る
-
-
2枚の画像を比較するのに便利な『比較用スライドショー』を超簡単に設置する方法を紹介！
以前の記事で、ホームページに普通のスライドショーを設置する方法について紹介しました。 [blogcard url="https://fukafuka295.jp/homepage-slideshow- ...
続きを見る
スライドショーの簡単な設置方法
まずは「bxSlilder」さんのサイトで配布されている JQueryのプラグインファイルをダウンロードしてください（画像の赤枠部分からダウンロード）
「jquery.bxslider.zip」というzipフォルダをダウンロードしたら解凍してください。するといくつかファイルとフォルダが出てくると思いますが、今回はその中の「jquery.bxslider.css」と「jquery.bxslider.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.js"></script>
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
jQuery(document).ready(function($){
$('.bxslider').bxSlider({
auto: true,
});
});
</script>
重要！！
上のコード2,3行目の「js/jquery.bxslider.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」の簡単な設置方法について解説しました。 すると、一部の方々から、スライドショーが正常に動作しないとの報告を少なからず頂 ...
続きを見る
左右のページ送りボタンが表示されない場合
「jquery.bxslider.css」ファイルを開き、「DIRECTION CONTROLS (NEXT / PREV)」の部分(107行目～) を見てみてください。
左右の送りボタンはダウンロードしたzipの中の「images」フォルダの中にある 画像ファイルから読み込んでいます。
その画像ファイルは「jquery.bxslider.css」の以下の赤枠で囲った部分で読みだしているのですが、 ボタンが表示されない場合は、この部分がボタン画像を置いた部分のパスと異なっている可能性があります。 一度確認してみて、正しいパスに直してください
画像選択ボタン(したにある●)の位置や色を変更したい場合
「jquery.bxslider.css」ファイルを開き、「PAGER」の部分(68行目～) を見てみてください。
画像の赤枠で示した通り、この行では選択ボタン(PAGER)の設定を行っています。
PAGERの色を変更したい場合は色コードを変えれば良いですし、位置を変えたい場合は 一番上の赤枠内に「position: relative」等を適用すれば自由に変更できます
みなさんも是非ご自身のホームページにスライドショー機能を実装してみてはいかかでしょうか。見栄えの良いホームページになること間違いなしです！！
▼こちらの記事もオススメ！
-
-
ホームページにサムネイル付きスライドショーを簡単に設置する方法(jQuery)
ホームページやブログに設置した「bxslider」のスライドショーに簡単なカスタマイズを施して、 下に各スライドの画像が表示される"サムネイル付き"のスライドショーにする方法について解説します！ ▼実 ...
続きを見る
-
-
2枚の画像を比較するのに便利な『比較用スライドショー』を超簡単に設置する方法を紹介！
以前の記事で、ホームページに普通のスライドショーを設置する方法について紹介しました。 [blogcard url="https://fukafuka295.jp/homepage-slideshow- ...
続きを見る
