【CSS,JavaScript】コピペで簡単シンプルなスライドショー(bxslider)

2019.04.29 / 更新日：2019.06.18

困ってる人

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

それでは、本日はとてもシンプルなスライドショーを表示する方法をご案内しますね

オペレーター

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

今回は、出来るだけシンプルで簡単、コピペで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">

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

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

HTML部分

// 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>

// HTML部分

</ul>

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

// CSS部分

.bxslider img { /* ここで画像を画面いっぱいに広げる */
	width: 100%;
	height: 100vh;
	object-fit: cover;
}

.bx-controls {
	display: none; /* 必要のない要素を隠す */
}

.bx-wrapper {
	font-size: 0px; /* これを入れる事により画像周りの謎の空白が消える */
}

// CSS部分

.bxslider img { /* ここで画像を画面いっぱいに広げる */

width: 100%;

height: 100vh;

object-fit: cover;

}

.bx-controls {

display: none; /* 必要のない要素を隠す */

}

.bx-wrapper {

font-size: 0px; /* これを入れる事により画像周りの謎の空白が消える */

}

JavaScript

// JavaScript

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

// 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>

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

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

プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール

ikuxx

海外約50ヶ国を放浪中
海外生活が長い事もあり、英語と韓国語をある程度話せます。
中国語に関しては、現在HSK4レベル

趣味は筋トレと海外旅行

FX＋いくつかのブログを運営中。
たまにWeb制作や写真のお仕事、過去には動画撮影のお仕事も

このWordPressテーマはゼロからの自作
なので、どこか変なところがあったら教えて下さい

最近はマレーシア住み

YouTubeも始めました

↓

ユーチューブ(YouTube)

ツイッター(Twitter)

インスタグラム(Instagram)

【CSS,JavaScript】コピペで簡単 シンプルなスライドショー(bxslider)

【CSS, JavaScript】コピペで簡単 シンプルなスライドショー(bxslider)

HTML部分

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

JavaScript

【CSS,JavaScript】コピペで簡単シンプルなスライドショー(bxslider)

【CSS, JavaScript】コピペで簡単シンプルなスライドショー(bxslider)