ネットコンテンツ全般から日々のお役立ち情報まで分かりやすくお届け | ふかふか交易所

ふかふか交易所

HP・ブログ関連

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

更新日:

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

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

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

まずは「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]スライドショー読み込み時に画像が一瞬バラけてしまう場合の超簡単な対処法

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

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

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

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

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

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

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

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

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

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

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

Copyright© ふかふか交易所 , 2019 All Rights Reserved.