CSS・JavaScript|コピペで簡単シンプルなスライドショー|bxslider

man

困ってる人
トップ画面でスライドショーを表示する方法が分からない
インターネットで検索してみても、やり方がいろいろと多過ぎてどれがいいのかいまいち
どうにか簡単に出来る方法はないかなぁ?
それでは、本日はとてもシンプルなスライドショーを表示する方法をご案内しますね
operator

オペレーター

こんにちは、ヨロと申します。

今回は出来るだけシンプルで簡単、コピペでOK、jQueryプラグイン「bxslider」を使ってトップページにスライドショーを表示する方法のご紹介。

CSS・JavaScript|コピペで簡単シンプルなスライドショー|bxslider

スライドショーを表示する方法というのは、インターネット上に様々な「jQueryプラグイン」があったりもするのですが、

今回は「bxslider」というものを使った方法で、画像のフェードイン、フェードアウトでのシンプルな方法をご紹介

順序としては、

  • 「bxslider」をダウンロードし、中のファイル「jquery.bxslider.js」と「jquery.bxslider.css」を保存
  • HTMLに画像を表示する記述(コピペでOK)
  • CSSで見た目を整える(これもコピペでOK)
  • bxslider」はこちらから。

    「jquery.bxslider.js」は、普段自分がJavaScriptを読み込む時のフォルダ内に保存。

    「jquery.bxslider.css」をCSSフォルダに、もしくは中のコードをコピーして使ってもOK。

    上のCSSファイルを読み込む時は、

    <link rel="stylesheet" href="css/jquery.bxslider.css">

    でファイルを読み込むのを忘れずに。

    HTML部分

    <ul class="bxslider">
    	<li><img src="画像ファイル" alt=""></li>
    	<li><img src="画像ファイル" alt=""></li>
    	<li><img src="画像ファイル" alt=""></li>
    	<li><img src="画像ファイル" alt=""></li>
    </ul>

    CSS部分:ここで表示方法やサイズの設定をする

    .bxslider img { /* ここで画像を画面いっぱいに広げる */
    	width: 100%;
    	height: 100vh;
    	object-fit: cover;
    }
    
    .bx-controls {
    	display: none; /* 必要のない要素を隠す */
    }
    
    .bx-wrapper {
    	font-size: 0px; /* これを入れる事により画像周りの謎の空白が消える */
    }

    JavaScript

    $(function() {
    	$('.bxslider').bxSlider({
    		mode: 'fade', // 今回はフェードイン[,]を必ず忘れずに
    		speed: 5000, // 5秒でゆっくりと変わっていくように
    		auto: true, // クリックしなくても自動的に変わっていくように
    		infiniteLoop: true, // 繰り返し
    	});
    });

    これで終わり。

    そうすると、画像が画面上いっぱいに広がって勝手にフェードイン、フェードアウトをしてくれるはず。

    注意点としては、jQueryを読み込む時はきちんと、

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

    こういったものを書くのを忘れずに。