JavaScript プログラミング

【jQuery初心者】簡単なスライドの作り方|アニメーションサンプル有り

2020年11月13日

 

こんにちは、イケゾーです。

イケゾー
今回は、jQueryを使ったスライドの作り方を紹介するよ

 

省スペースで多くの情報を掲載できるのがスライドです。ほとんどのサイトでスライドを採用しており、WEB制作では必須のテクニックです。スマホ表示の場合は特にスライド表示が便利で、ユーザの目に止まる画像を配置することで、成約につなげることができます。

 

ただし、HTML/CSSだけを触っただけの方にとって、jQueryのこういった動きのあるモノってハードル高く感じます。僕もそうでした。仕組みを理解してから取り組んでみると、意外と大したことはありません。なので当記事では、コードを掲載するだけでなく、超初心者向けに丁寧に解説していきます。

 

コードはそのまま仕事に応用できる財産になりますので、ぜひ手を動かしてPC上で動かしてみてください。

この記事はこんな人におすすめ!

  • jQuery初心者(どうやって使うの?なにができるの?)
  • jQueryってなんだか難しそうって思っている
  • jQueryってスライドの作り方を知りたい
  • jQueryの「addClass」「removeClass」の使い方を知りたい
スライドを使ったサンプル
【ポートフォリオ】ときしらずの宿様(模写)

続きを見る

 

当ブログでは、WordPressテーマ 「WING(AFFINGER5)」 を使用しています。

 

 

【jQuery初心者】簡単なスライドの作り方を解説

「indexボタン」と「矢印ボタン」の2つを実装していき、その後コードの重複をきれいに仕上げていく流れになります。

 

完成物の確認

完成

 

画像をスライドするためのボタンを2種類作成します。どちらもよく見かけるものですが、念のため説明をしておきます。

  • indexボタン
    スライドに名前をつけて、クリックすると対応した画像が表示されるものです。
  • 矢印ボタン
    スライドを順に表示させるモノ。「次へ▶︎」などと矢印を使われることが多いです。

 

注意点ですが、基本的なHTML,CSSは出来ていて、jQueryが使える状態であることを前提に進めいてきます。不安な方はこちらの記事で確認してから始めましょう。

HTML/CSSの基本
初心者向け【WEBサイト模写のやり方】HTMLとCSSのテンプレートを作る方法を解説

続きを見る

 

 

表示するスライドを切り替える仕組み

まずは、大切な仕組みの理解をしましょう。

仕組み

  1. 画像を複数枚用意し<li>で囲み、全てにclass="slide"をつけます。
  2. 「.slide」要素に対して、display: noneを用いて全て非表示にします。
  3. class="active"を用意して、display: blockで表示ONにします。
  4. 表示したい画像のみに、「.active」を与えます。

このように「.active」を付け替えることで表示するスライドを切り替えていきます。

 

indexボタン

それでは、indexボタンを実装していきます。

 

HTML

  <ul class="slides">
    <li class="slide active"><img src="image/slide1.png"></li>
    <li class="slide"><img src="image/slide2.png"></li>
    <li class="slide"><img src="image/slide3.png"></li>
    <li class="slide"><img src="image/slide4.png"></li>
  </ul>

  <div class="index-btn-wrapper">
    <div class="index-btn">1</div>
    <div class="index-btn">2</div>
    <div class="index-btn">3</div>
    <div class="index-btn">4</div>
  </div>

 

CSS

デザインのみなので省略

 

jQuery

$('.index-btn').click(function() {

	// いま「.active」が付いている要素から「.active」を取り外す
	$('.active').removeClass('active');

	// クリックされた「index-btn」が、「index-btn」要素の何番目かを取得して
	var clickedIndex = $('.index-btn').index($(this));

	// 同じ番号の「.slide」要素に「.active」をつける
	$('.slide').eq(clickedIndex).addClass('active');

});

 

 

 

矢印ボタン

次は、矢印ボタンを実装していきます。

 

HTML

<div class="change-btn-wrapper">
  <div class="change-btn prev-btn">◀︎ 前へ</div>
  <div class="change-btn next-btn">次へ ▶︎</div>
</div>

 

CSS

デザインのみなので省略

 

jQuery

$('.change-btn').click(function() {

// いま「.active」が付いている要素を変数にいれる
	var $displaySlide = $('.active');

// いま「.active」が付いている要素から「.active」を取り外す
	$displaySlide.removeClass('active');


// クリックされたボタンに「.next-btn」要素があれば、
	if($(this).hasClass('next-btn')){

		// 「.active」が付いている要素の次の要素に「.active」をつける
		$displaySlide.next().addClass('active');

	} else{
		//そうでなければ、前の要素に「.active」をつける
		$displaySlide.prev().addClass('active');
	}

});

 

ボタンの表示/非表示

ここまで実装できましたが、ひとつ問題があります。

最初のスライドを表示している時に、存在しないスライドへの「前へボタン」が表示されていて、
最後のスライドを表示した時に、存在しないスライドへの「次へ」ボタンが表示されてしまっています。

クリックしてしまうと、画像が消えてしまい、リロードしないと正常に表示できなくなってしまいます。

 

これを直していきます。

CSS

初期状態では、「前へボタン」は非表示にしておきます。

.prev-btn{
	display: none;
}

 

jQuery

// 「.active」が付いているスライド番号を変数にいれる
var slideIndex = $('.slide').index($('.active'));

// 矢印ボタンを表示する
$('.change-btn').show();

// スライド番号が0ならば、次へボタンを非表示にする
if(slideIndex ==0){
	$('.prev-btn').hide();

	// スライド番号が最後ならば、前へボタンを非表示にする
} else if (slideIndex == $('.slide').length - 1){
	$('.next-btn').hide();
}

 

 

完成ソースコード

完成版を載せておきます。そのままコピペでも同じように実装できます。

 

HTML

<div class="wrapper container">
  <div class="change-btn-wrapper">
    <div class="change-btn prev-btn">◀︎ 前へ</div>
    <div class="change-btn next-btn">次へ ▶︎</div>
  </div>

  <ul class="slides">
    <li class="slide active"><img src="image/slide1.png"></li>
    <li class="slide"><img src="image/slide2.png"></li>
    <li class="slide"><img src="image/slide3.png"></li>
    <li class="slide"><img src="image/slide4.png"></li>
  </ul>

  <div class="index-btn-wrapper">
    <div class="index-btn">1</div>
    <div class="index-btn">2</div>
    <div class="index-btn">3</div>
    <div class="index-btn">4</div>
  </div>
</div>

 

CSS

.slide{
	display: none;
}
.active{
	display: block;
}
.index-btn-wrapper{
	text-align: center;
}
.index-btn{
	display: inline-block;
	color: #fff;
	background: grey;
	border: 1px solid #fff;
	text-align: center;
	width: 40px;
	padding: 6px 0;
	margin: 0 5px;
	cursor: pointer;
}
.index-btn:hover{
	background: #000;
}
.change-btn{
	cursor: pointer;
}
.prev-btn, .next-btn{
	color: #fff;
	background: grey;
	border: 1px solid #fff;
	text-align: center;
	width: 60px;
	padding: 6px 0;
	margin: 0 5px;
	cursor: pointer;
	margin-bottom: 10px;
}
.prev-btn{
	float: left;
	display: none;
}
.next-btn{
	float: right;
}

 

jQuery

$(function(){
	function toggleChangeBtn(){
		var slideIndex = $('.slide').index($('.active'));
		$('.change-btn').show();
		if(slideIndex ==0){
			$('.prev-btn').hide();
		} else if (slideIndex == $('.slide').length - 1){
			$('.next-btn').hide();
		}
	};

	$('.index-btn').click(function() {
		$('.active').removeClass('active');
		var clickedIndex = $('.index-btn').index($(this));
		$('.slide').eq(clickedIndex).addClass('active');
		toggleChangeBtn();
	});

	$('.change-btn').click(function() {
		var $displaySlide = $('.active');
		$displaySlide.removeClass('active');

		if($(this).hasClass('next-btn')){
			$displaySlide.next().addClass('active');
		} else{
			$displaySlide.prev().addClass('active');
		}
		toggleChangeBtn();
	});
});

 

 

まとめ

 

イケゾー
最後まで読んでいただき、ありがとうございました。
ご不明点やご意見は、コメントやTwitterにて、お寄せください 🙂
では、またお会いしましょう
  • この記事を書いた人

ikezooo

ご訪問ありがとうございます。 Ikezoooブログ「WEB積み上げ先生」を運営している30歳です。こちらでは、完全初心者からのプログラミング学習を発信しています。

-JavaScript, プログラミング
-, , , ,

© 2021 IkezoooBlog