スライドショーを作ってみよう！
スライドショー
コード（Codepen）
コードはこちらから見ることができます。使用画像はスライドショーの各画像を右クリックしてダウンロードしてください。
See the Pen スライドショー by Shin (@shin-ichi) on CodePen.
解説
【HTML解説】
HTML部分は、画像を表示するメイン画面部分、前の画像に戻ったり次の画像に進めたりするボタン、ドットで現在どの順番の画像かがわかるナビゲーション部分があります。
【CSS解説】
クラス「.slide-item」の中の「flex-shrink: 0;」 にすることで、ブラウザの幅が拡大され画像が大きくなっていっても、画像のサイズがブラウザの画面いっぱいに表示されるようになっています。
【JavaScript解説】
【メイン画面部分の解説】
このスライドショーの最後の画像から最初の画像にスライドする際に、最後の画像から右にスライドして最初の画像に戻るようになっています。これは、実は最後の画像の次に最初の画像のコピーを作成して、その画像にスライドし、スライドのアニメーションが終わった瞬間に最初の画像に瞬間移動するという仕組みです。
// 1枚目スライドを最後にコピー
slideContainer.appendChild(slides[0].cloneNode(true));
このコードは1枚目の画像（スライド）を最後の画像の後ろに追加するものです。「appendChild」とは最後に追加する、という意味です。「slides[0].cloneNode(true)」とは1枚目（配列で0番目という）の画像をコピーする、という意味です。
最後の画像にきたら、次に「最後の画像の後ろにコピーした最初の画像」にスライドします。
if(currentIndex === slides.length)
になったら（ slides.lengthとは配列の長さで、最後の画像の後ろにコピーした画像の番になったら、という意味です。）、瞬間移動が一度だけ実行されます。
【ナビゲーション部分の解説】
ナビゲーション部分は、一つ目のドットがnavs[0]、二つ目のドットがnavs[1]、三つ目のドットがnavs[2]になっています。
//画像を格納したnavsという名前の配列
navs[currentIndex]
と記述していますが、最初はcurrentIndex=0;にしているため、一つ目のドットが選択されるわけです。選択されているナビゲーションにオレンジのドットがつくクラス（CSSの「.nav-active」）を付与することによって、現在のスライドの番号がわかるようになっています。また次のナビゲーションになったら
navs[currentIndex].classList.remove('nav-active');
で一度、現在のナビゲーションに付与されているオレンジのドットがつく(塗りつぶす) クラス（CSSの「.nav-active」）を取り除きます。その上で、
currentIndex++;
でcurrentIndexに+1した後、
navs[currentIndex].classList.add('nav-active');
で新しく現在のナビゲーションにオレンジのドットがつくクラスを付与しています。
【スライドするアニメーション部分の解説】
//1秒間で開始時と終了時にゆっくり動くアニメーション
slideContainer.style.transition = 'transform 1s ease';
//X軸方向に-（マイナス）currentIndex * （かける）100%分スライドする
slideContainer.style.transform = `translateX(-${currentIndex * 100}%)`;
画像が切り替わるアニメーションは、1秒で実行され、アニメーションの種類は開始時と終了時がゆっくり動く「ease」を選択しています。またこのアニメーションは、画像のX軸方向に-(マイナス)currentIndex*（かける）100%分移動するようにしています。
最後の画像から最初の画像に移動する際、まず最初の画像をコピーし、最後の画像の次に追加したところへスライドします。その後、setTimeout関数で一度だけ瞬間移動が行われます。
//1秒のアニメーションを一時的に無効にする
slideContainer.style.transition = 'none';
は1000ミリ秒（1秒）でスライドするアニメーションが終わったら、このアニメーションを一時的に解除し、瞬間的にスライドするようにするコードです。その後、
//X軸を0（一番最初の位置）に戻す
slideContainer.style.transform = `translateX(0)`;
で、X軸を0（一番最初の位置）に戻します。
次に、
//画像をスライドするアニメーション「changeImg」を4000ミリ秒（4秒）の間隔で実行
slideshow = setInterval(changeImg, 4000);
で、「changeImg」という画像（スライド）を移動させる関数を4000ミリ秒（4秒）の間隔で実行します。
【ナビゲーションボタン（オレンジのドット）がクリックされた時の動作解説】
ナビゲーションの説明に戻ります。次はナビゲーションボタンがクリックされた時の動作について説明します。ナビゲーションはここではnavs[0]、navs[1]、navs[2]の三つです。それぞれがクリックされた時の動作を全て記述します。記述方法は数字の部分(currentIndexの部分)をiという変数にしてfor文でiが0〜2の場合を全て書き出します。
ナビゲーションボタンがクリックされると、まずnav-active(ナビゲーションにオレンジのドットがつくクラス)を全て解除します。
navs[currentIndex].classList.remove('nav-active');
解除したら、次にcurrentIndexにクリックしたナビゲーションの番号(i)を代入します。
currentIndex = i;
その後、クリックしたナビゲーションにオレンジのドットがつくクラス（nav-active）を付与すると、ドット部分がオレンジで塗りつぶされます。
【前に戻るボタン・次へ進むボタンの解説】
次に、前に戻るボタン・次へ進むボタンについて説明いたします。「前へ戻る」ボタンが押されると、まず、
navs[currentIndex].classList.remove('nav-active');
で現在のナビゲーションに付与されているオレンジのドットがつく（塗りつぶされる）クラスを解除します。次にcurrentIndexを-1します。
currentIndex = currentIndex -1;
ここでcurrentIndexが0より小さくなったら、「最初の画像のコピー」を追加したところへ瞬間移動します。そして瞬間移動したら、setTimeoutで前の画像へスライドするアニメーションを実行します。
「次に進むボタン」も「前に戻るボタン」と基本的には同じで、
if(0<=currentIndex && currentIndex<=slides.length-1){
navs[currentIndex].classList.remove('nav-active');
}
でcurrentIndexが0〜2の時、現在のナビゲーションに付与されているオレンジのドットがつく（塗りつぶされる）クラスを解除し、次にcurrentIndexを+1します。currentIndexが3以上の時は何もしません。
if (currentIndex >= slides.length)
でcurrentIndexがslides.length（コピーした画像の番）以上になったら（「最初の画像のコピー」部分にきたら）、瞬間移動して最初の画像に戻ります。