ライブラリーを使わずスライダーをJavaScriptで実装する

常時3枚表示、矢印ボタンで左右に一つずつずらす。

<div class="slide-container">
    <div class="slide">スライド1の内容</div>
    <div class="slide">スライド2の内容</div>
    <div class="slide">スライド3の内容</div>
    <div class="slide">スライド4の内容</div>
</div>

<button id="left-arrow">&lt;</button>
<button id="right-arrow">&gt;</button>

<div class="dot-navigation">
    <span class="dot active"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
</div>

.slide-container {
    display: flex;
}

.slide {
    width: calc(100% / 3);
    height: 100%;
    float: left;
    display: none;
}

.current-slide1,
.current-slide2,
.current-slide3 {
    display: block;
    margin-left: 0;
}

.current-slide1 {
    order: 1;
}

.current-slide2 {
    order: 2;
}

.current-slide3 {
    order: 3;
}

.dot-navigation {
    text-align: center;
    margin-top: 10px;
}

.dot-navigation span {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #000;
    margin: 0 5px;
    cursor: pointer;
}

.dot-navigation span.active {
    background-color: #ff0000;
}

document.addEventListener("DOMContentLoaded", () => {
    // スライド要素を取得
    const slides = document.querySelectorAll(".slide");

    // スライドの数を取得
    const slideCount = slides.length;

    // 現在のスライドインデックスを保持する変数を初期化
    let currentSlideIndex = 0;

    // ドットナビゲーション要素を取得
    const dots = document.querySelectorAll(".dot");

    // スライドの表示状態を更新する関数
    const updateSlideVisibility = () => {
        // すべてのスライドを非表示にする
        for (let i = 0; i < slideCount; i++) {
            slides[i].classList.remove("current-slide1");
            slides[i].classList.remove("current-slide2");
            slides[i].classList.remove("current-slide3");
        }

        // 現在のスライドを表示する
        slides[currentSlideIndex].classList.add("current-slide1");

        // 現在のスライドの次のスライドを表示する
        const nextSlideIndex = (currentSlideIndex + 1) % slideCount;
        slides[nextSlideIndex].classList.add("current-slide2");

        // 現在のスライドの次の次のスライドを表示する
        const nextNextSlideIndex = (currentSlideIndex + 2) % slideCount;
        slides[nextNextSlideIndex].classList.add("current-slide3");

        // ドットナビゲーションの表示を更新する
        for (let i = 0; i < slideCount; i++) {
            dots[i].classList.remove("active");
        }
        dots[currentSlideIndex].classList.add("active");
    };

    // 左矢印をクリックした時の処理
    document.getElementById("left-arrow").addEventListener("click", () => {
        currentSlideIndex--;
        if (currentSlideIndex < 0) {
            currentSlideIndex = slideCount - 1;
        }
        updateSlideVisibility();
    });

    // 右矢印をクリックした時の処理
    document.getElementById("right-arrow").addEventListener("click", () => {
        currentSlideIndex++;
        if (currentSlideIndex >= slideCount) {
            currentSlideIndex = 0;
        }
        updateSlideVisibility();
    });
    
    // ドットナビゲーションをクリックした時の処理
    for (let i = 0; i < slideCount; i++) {
        dots[i].addEventListener(
            "click",
            (function (index) {
                return function () {
                    currentSlideIndex = index;
                    updateSlideVisibility();
                };
            })(i)
        );
    }

    // 初期表示時にスライドを表示する
    updateSlideVisibility();
});