【プラグイン不要】自作スライダーを作成する方法

RELEASE / 2022.7.10 UPDATE / 2023.11.19

JavaScript

jQuery

スライダー

プラグイン不要

自作

こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

WEBサイト制作でも使用頻度の高いスライドショー。フェードや横スライド、全画面表示など様々なスライドショーがあります。jQueryプラグインには様々なスライドショープラグインが存在しています。
slick.jsやbxSlider.js、Swiper.jsなど有名どころのプラグインを使用することである程度の要望は実装することが可能です。

しかし中には凄く奇抜なスライドショーアニメーションの仕様を要求されることがあるかもしれません。プラグインでしかスライドショーを実装したことがない場合、このような状況になった際、困ってしまうと思います。

今回の記事では簡単のスライドショーを自作してどのようにしてスライドショーが実装されているのか、解説したいと思います。

この記事の目次を表示

1 自作スライダーサンプルソース
2 スライドショーの解説
- 2.1 HTML、CSSの解説
- 2.2 JavaScript（jQuery）の解説

自作スライダーサンプルソース

まずは自作スライダーのソースを見てみましょう。

HTML

<div class="slider">
	<div class="item"><img src="556-1.jpg" alt=""></div>
	<div class="item"><img src="556-2.jpg" alt=""></div>
	<div class="item"><img src="556-3.jpg" alt=""></div>
</div>

HTMLは同じ構造で用意しましょう。

CSS

.slider{
	width: 500px;
	height: 350px;
	position: relative;
}
.item{
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	position: absolute;
	opacity: 0;
	transition: 1s all ease;
}
.item img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.item.current{
	opacity: 1;
}

JavaScript（jQuery）

const $item = $('.slider .item');
const len = $item.length;

$(window).on('load',function(){
	$item.eq(0).addClass('current');
});

function slider(){
	const current_number = $('.current').index($item);
	if( current_number+1 == len ){
		$item.eq(current_number).removeClass('current');
		$item.eq(0).addClass('current');
	}
	else{
		$item.eq(current_number).removeClass('current');
		$item.eq(current_number+1).addClass('current');
	}
}
setInterval(slider,5000);

スライドショーの解説

HTML、CSSの解説

スライドショーを作るためにまずは同じ構造のHTMLを用意します。このHTMLを親要素の.slider、子要素の.itemにそれぞれ以下のようにCSSを指定することで全ての要素が一か所に重なった状態となります。また標準でopacityを0としておきます。

.slider{
	position: relative;
}
.item{
	left: 0;
	top: 0;
	position: absolute;
	opacity: 0;
}

また、スライドショーらしくフワッフワッと切り替わるように.itemに以下を指定しておきます。これを指定することによりopacityが0→1、1→0になるとき、1秒かけて消えたり表示されたりするようになります。

.item{
	transition: 1s all ease;
}

表示される画像はクラス名currentが付与されます。このクラスにはopacity:1;が指定されるようになっているのでcurrentが付与された要素だけ表示されるようになります。currentの付与削除はJavaScriptで制御します。

.item.current{
	opacity: 1;
}

JavaScript（jQuery）の解説

JavaScript部分については順番に解説していきたいと思います。

const $item = $('.slider .item');

この記述はこのプログラムで使用頻度が高いものを変数化する記述です。例えば本来であれば1のように記述しないといけない部分を2のように記述することが出来るようになります。
これによりもしセレクタの名前が変わった場合もこの一か所を変更するだけで済むようになります。

// １
$('.slider .item').addClass('current');
$('.slider .item').removeClass('current');

// ２
$item.addClass('current');
$item.removeClass('current');

以下の記述は$(‘.slider .item’)の数を数えています。この数を取得することでスライダーの枚数が増えた場合もその数に合わせてスライダーが動いてくれるようになります。もちろんそのための設定は別途必要になります。

const len = $item.length;

続いて以下のように記述をします。この記述はページの読み込みが完了した際に$(‘.slider .item’)の1個目に.currentを付与する記述です。これでページ読み込み完了時、1個目の要素だけ表示された状態となります。

$(window).on('load',function(){
	$item.eq(0).addClass('current');
});

ここで関数を作成します。{}内に書かれた内容が処理されます。

また、合わせてsetInterval関数を使用します。setInterval関数は指定された間隔毎に特定処理を繰り返し行うことが出来る関数です。1つ目の引数に関数名、2つ目の引数に間隔を指定します。
これで以下の記述の場合、sliderという関数を5秒ごとに行うというものになります。

function slider(){
	// ここに処理を記述
}

setInterval(slider,5000);

続いてslider関数の中を解説していきます。

const current_number = $('.current').index($item);

この記述では.currentが付与されている$item（$(‘.slider .item)）は何番目かを調べています。ここで注したいのがプログラム的に1番目は0、2番目が1…となる点です。

	if( current_number+1 == len ){
		$item.eq(current_number).removeClass('current');
		$item.eq(0).addClass('current');
	}
	else{
		$item.eq(current_number).removeClass('current');
		$item.eq(current_number+1).addClass('current');
	}

最後のこちらの記述です。if( current_number+1 == len ){}の中の処理は最後の要素の時、else{}の中の処理はそれ以外の時の処理になります。

まずはelse{}の部分から解説していきます。

$item.eq(current_number)の記述で現在.currentが付与されている要素を指定しています。この要素の.currentを取り除きます。それと合わせて $item.eq(current_number+1) の要素、現在.currentが付与されている次の要素に.currentを付与します。最後の要素でない場合は「current_number番目のクラスを取り除きcurrent_number+1番目にクラスを追加する」という法則が常に成立します。

この「current_number番目のクラスを取り除きcurrent_number+1番目にクラスを追加する」という法則が唯一適用されないのが最後の要素の時です。

最後の要素の時だけはcurrent_number+1番目にクラスを付与するのではなく、1番目、プログラム的には0番目の要素にクラスを付与する必要があります。それが以下の記述です。

	if( current_number+1 == len ){
		$item.eq(current_number).removeClass('current');
		$item.eq(0).addClass('current');
	}

なぜif( current_number+1 == len )なのかというと、プログラムというのは●番目というのは0、1、2…と0からカウントが始まります。しかし要素の個数を数える場合は1個、2個…と1から数えます。
例えば個数が3つあった場合、現在表示されいる番号を取得すると2が返ってきます。2が最後の要素なのでif( 2+1==3 )としてあげることで最後の要素の時の処理とすることが出来ます。

以上で自作スライドショーの完成です。これを応用することで様々なスライドショーを作成することが出来ます。自作で作成するということはプラグインでは実装が難しいどんな要望のスライドショーでも作成することが出来るということです。

時間や予算に余裕のある案件の時はプラグインではなく、自作スライダーを設置してみるのもいいかもしれませんね。