スライド

仕様

• 左右のボタンをクリックしてスライド切り替え
• スライドの下に配置した丸ボタン（インジケーター）をクリックしてスライド切り替え
• 秒数を指定してスライド切り替え

仕組み

今回はスライドの各要素にクラスshowをつけたり外したりすることでスライドの切り替えを行う。
スライドの各要素にはデフォルトでopacity: 0;を設定
クラスshowにはopacity: 1;を設定
クラスshowがつくことで該当の要素のスライドが表示される仕組み

完成形

See the Pen Untitled (@vqjkiggh-the-lessful) on CodePen.

必要な要素を取得

slide.js

// クラス名slide__itemの要素を取得（スライドの要素） ← この要素のインデックスを指定して表示切り替え
const slide = document.getElementsByClassName("slide__item");
// id(prev)の要素を取得（左のボタン）
const prev = document.getElementById("prev");
// id(next)の要素を取得（右のボタン）
const next = document.getElementById("next");
// クラス名.slide__itemの要素数を取得（今回は３つ）
const totalSlides = document.querySelectorAll(".slide__item").length;
// 丸ボタンの要素を取得　　　← ここの要素のインデックスを指定して色を変える
const dot = document.getElementsByClassName("dot__item");
// スライドの要素番号（インデックス）をこの変数に代入していく（初期値は0に設定）
let index = 0;
// 丸ボタンの最初の要素に色（黒）を設定
dot[index].style.backgroundColor = '#000000';

getElementByIdメソッド

指定したID（HTMLタグで指定したID）を持つ要素を取得するメソッド

getElementsByClassNameメソッド

指定したクラス名（HTMLタグで指定したクラス名）を持つ要素を取得するメソッド

querySelectorAllメソッド

指定したCSSセレクタを持つ要素を取得するメソッド

CSSセレクタとは？

CSSセレクタというのは、HTMLページに対してスタイルをどの要素に設定するのかを指定する時に使用する書式。
querySelectorAllメソッドでは同じ書式を使ってHTMLの中の要素を取得するための条件を記述する。

getElementById(ClassName)とquerySelectorAllの違いについてはこちらを参照

styleプロパティ

指定した要素のスタイルをオブジェクトで返すプロパティ
オブジェクトにはスタイルの各プロパティ（font-sizeとかCSSのプロパティ）が格納されており、それを用いることでスタイルを操作することができる。

左右のボタンをクリックしてスライド切り替え

やりたいこと

・左のボタン（prev）をクリックして前のスライドに切り替え
・右のボタン（next）をクリックして次のスライドに切り替え
・上記の２つの動きに合わせて丸ボタンの色も変更（表示中のスライドと同じ番号の丸ボタンを黒色に）

仕組み

prevボタンをクリックした場合は、前の要素（インデックス）を取得して、クラスshowを付与
nextボタンをクリックした場合は、次の要素（インデックス）を取得して、クラスshowを付与

slide.js

/*
左右のボタンをクリックしてスライドを切り替え
*/

// prevボタンをクリックしたときに関数を実行
// prevボタンを押すと前のスライドに移動する
prev.addEventListener("click", () => {
  // 現在の要素からshowを削除
  slide[index].classList.remove("show");
  // 現在の要素の色をグレーに
  dot[index].style.backgroundColor = 'gray';
  // indexが０の場合は総スライド数-1（最後のスライド要素）をindexに代入
  // 0でない場合はindex-1（前の要素）を代入
  index = index === 0 ? totalSlides - 1 : index - 1;
  // 前の要素にshowを付与
  slide[index].classList.add("show");
  // 丸ボタンの色を変更
  dot[index].style.backgroundColor = '#000000';
});

// nextボタンをクリックしたときに関数を実行
// 右のボタンを押すと次のスライドに移動する
next.addEventListener("click", () => {
  // 現在の要素からshowを削除
  slide[index].classList.remove("show");
  // 現在の要素の色をグレーに
  dot[index].style.backgroundColor = 'gray';
  // indexが総スライド数-1（最後のスライド要素）の場合は0（最初の要素）をindexに代入
  // 0でない場合はindex+1（次の要素）を代入
  index = index === totalSlides - 1 ? 0 : index + 1;
  // 次の要素にshowを付与
  slide[index].classList.add("show");
  // 丸ボタンの色を変更
  dot[index].style.backgroundColor = '#000000';
});

addEventListenerメソッド

addEventListenerはメソッドの一つで、指定した要素で指定されたイベントが発生した際に任意の処理を実行させることができる。

💡基本の書き方

イベントが発生する要素.addEventListener("イベントの種別",　function()　{・・・});

今回はprev要素とnext要素に対してクリックイベントが発生した際に処理を実行したいので

prev.addEventListener("click", function() {・・・});
next.addEventListener("click", function() {・・・});

となり、アロー関数を用いて関数の記述を省略したので下記のようになる。

prev.addEventListener("click", () => {・・・});
next.addEventListener("click", () => {・・・});

classListプロパティ

指定した要素のクラス名を含むオブジェクトを返すプロパティ。
classListプロパティはDOMTokenListオブジェクト（インターフェイス）を持っている。
というのもclassListはDOMTokenListのインスタンスなので、classListを呼び出すことでDOMTokenListも呼び出している。

remove・addメソッド

指定した要素を削除または追加するメソッド
classListプロパティと合わせて使用することで指定した要素にクラス名を追加・削除することができる
DOMTokenListオブジェクト（インターフェイス）のメソッド(DOMTokenListという機能の一部)。

DOMTokenList

スペースで区切られた属性値（クラス名など）やその属性値を操作するためのメソッドを持つオブジェクト。
（↑上記のような便利な機能がまとまっているのでDOMTokenListはインターフェイス（部品・機能）でもある）
そのメソッドの一つが上記のcontainsメソッド。
DOMTokenListはクラスとして定義され、インスタンス化されており、Element.classListなどのインスタンスを使って呼び出すことができる。

参考記事：DOMTokenList

インターフェイス

部品や機能の集まり
参考記事：インターフェイス

三項演算子

if文を省略して簡素に書くことができる記述

↓この部分

index === 0 ? totalSlides - 1 : index - 1;
index === totalSlides - 1 ? 0 : index + 1;

💡基本の書き方

条件式 ? Trueの処理 : Falseの処理;

↓今回三項演算子を用いて省略した部分をif文に直すとこうなる

sample.js

// indexが０の場合
index = if (index === 0) {
    totalSlides - 1
} else {
    index - 1
}
// indexがtotalSlides-1と同じ場合
index = if (index ===　　totalSlides - 1) {
    0
} else {
    index + 1
}

スライドの下に配置した丸ボタン（インジケーター）をクリックしてスライド切り替え

やりたいこと

・下部の３つの丸ボタンのうちどれかをクリックするとそれと連動してスライドも切り替わる
・上記の動きに合わせて丸ボタンの色も変更（表示中のスライドと同じ番号の丸ボタンを黒色に）

仕組み

丸ボタンをクリックした際にクリックされた要素（インデックス）を取得
取得した要素にクラスshowを付与

slide.js

/*
丸ボタン（インジケーター）をクリックしてスライドを切り替え
*/

// 変数dotのオブジェクトから配列を作成
const list = Object.values(dot);
// 配列内の各要素に対して処理を行う
list.forEach((li) => {
  // 各li要素にクリックイベントを追加、クリックされた際に処理を行う
  // イベントが発生した際に引数としてイベントに関する情報がeとして渡される（イベントがどの要素で発生したか、イベントの種類、イベントの座標など）
  li.addEventListener('click', (e) => {
    // 現在の要素からshowを削除
    slide[index].classList.remove('show');
    dot[index].style.backgroundColor = 'gray';
    // targetプロパティでイベントが発生した要素を取得
    // liと一致する場合はその要素のインデックスを返す（findIndex（）メソッド）
    index = list.findIndex((li) => li === e.target);
    // クリックされた要素にshowを追加
    slide[index].classList.add('show');
    dot[index].style.backgroundColor = '#000000';
  });
});

Object.valuesメソッド

指定されたオブジェクトの値を配列にして返すメソッド

オブジェクトを配列にするメソッドとしてArray.fromメソッドもある
Object.valuesメソッドとArray.fromメソッドの違いはこちらを参照

addEventListenerメソッドに引数と渡す

今回はaddEventListenerメソッドにeという引数を渡している。
この引数にはイベントオブジェクトというものが入っている。イベントオブジェクトとはイベントが発生した際の様々な情報が入っている。

targetプロパティ

イベントオブジェクトに対して使用することができるプロパティ。
イベントが発生した要素を取得することができる。

findIndexメソッド

配列に対して使用できるメソッド。
配列内から指定した条件と一致する要素を検索し、条件に一致した最初の要素のインデックスを返す。
コールバック関数function(引数) {・・・}の引数として、現在取り出されている要素の値、要素のインデックス、そして配列そのものが呼び出される。

コールバック関数についてはこちらを参照

💡基本の書き方

sample.js

配列名.findIndex(function(引数) {
  return 条件;
});

↓今回のを通常の書き方に直すとこうなる

sample.js

list.findIndex(function(li) {
    return li === e.target;
})

↓アロー関数を用いて省略したのでこうなる

sample.js

list.findIndex((li) => li === e.target);

秒数を指定してスライド切り替え

やりたいこと

・5秒ごとにスライドを切り替える

仕組み

5秒ごとにスライドの次の要素にクラスshowを付与(上部で記述したnextClick()関数を実行)

slide.js

/*
時間を指定してスライド切り替え
*/
// 5秒ごとに関数nextClickを実行（コールバック関数を使用）
setInterval(nextClick, 5000);

setIntervalメソッド

指定した一定時間ごとに関数を実行するメソッド

💡基本の書き方

sample.js

setInterval(実行する処理, 処理間隔)