最小限のコードでJavaScriptのカルーセルを作成する

最小限のコードでカルーセルを作成する方法を解説します。

非常にシンプルなので、必要に応じてカスタマイズすることができます。

サンプルコード

<div id="carousel">
    <img src="image1.jpg" alt="画像1" class="slide" style="opacity: 1;">
    <img src="image2.jpg" alt="画像2" class="slide" style="opacity: 0;">
    <img src="image3.jpg" alt="画像3" class="slide" style="opacity: 0;">
</div>

#carousel {
      position: relative;
      width: 300px;
      height: 200px;
      overflow: hidden;
}
.slide {
      position: absolute;
      width: 300px;
      height: 200px;
      transition: opacity 1s;
}

let currentIndex = 0;
const slides = document.querySelectorAll('.slide');

setInterval(() => {
    slides[currentIndex].style.opacity = 0;
    currentIndex = (currentIndex + 1) % slides.length;
    slides[currentIndex].style.opacity = 1;
}, 2000);

• 画像は#carouselというdiv要素の中に配置されており、JavaScriptは2秒ごとに次の画像に切り替えます。
• 画像はフェードイン/フェードアウトするための簡単なオパシティトランジションを使用しています。
• 画像ファイル（image1.jpg、image2.jpg、image3.jpg）は、適切なパスに置かれている必要があります。

解説

以下、コードの各部分について具体的に説明します。

HTML部分

1. <div id="carousel"> : カルーセルを含むコンテナdiv要素です。このdivの中に、画像が配置されます。
2. <img src="image1.jpg" alt="画像1" class="slide" style="opacity: 1;"> : 表示する画像要素です。最初の画像は表示され（opacity: 1）、他の画像は非表示になっています（opacity: 0）。

CSS部分

1. #carousel : カルーセルのコンテナに適用されるスタイルです。positionはrelativeに設定され、overflowはhiddenに設定されています。これにより、画像がコンテナの外にはみ出ないようになります。
2. .slide : すべての画像要素に適用されるスタイルです。positionはabsoluteに設定されており、これにより画像が互いに重なり、同じ場所に表示されます。transitionプロパティで、opacityの変化が1秒かけて滑らかに行われます。

JavaScript部分

1. let currentIndex = 0; : 現在表示されている画像のインデックスを追跡する変数です。
2. const slides = document.querySelectorAll('.slide'); : すべての画像要素を取得して、slides変数に格納します。
3. setInterval() : この関数は、指定された間隔（この場合は2000ミリ秒、つまり2秒）ごとにコードを実行します。
4. slides[currentIndex].style.opacity = 0; : 現在の画像を非表示にします。
5. currentIndex = (currentIndex + 1) % slides.length; : 現在のインデックスを更新し、最後の画像の後は最初の画像に戻ります。
6. slides[currentIndex].style.opacity = 1; : 次の画像を表示します。

これらのコードの組み合わせにより、シンプルな画像カルーセルが作成されます。画像は2秒ごとにフェードインとフェードアウトで切り替わります。