🛝

スライダーをJavaScriptで実装してみた

2024/01/21に公開

CSS

javascriptの練習として
ライブラリを使わずにスライダーを実装してみたくなり、書いてみました。

完成したもの

まず完成したものがこちら。
ボタンはどうしようかなと思いつつ、一旦特にスタイルはあてていない状態です。

実装内容

HTML

<!-- スライダー部分 -->
<div class="click_slider_wrapper">
    <div class="slider_item cl01 _show">スライダー１</div>
    <div class="slider_item cl02">スライダー２</div>
    <div class="slider_item cl03">スライダー３</div>
    <div class="slider_item cl04">スライダー４</div>
</div>

<!-- スライドさせるためのボタン -->
<button class="prev_btn">&lt;</button>
<button class="next_btn">&gt;</button>

CSS

本来はスライダーには画像を使う想定です。
今回は要素に背景色と文字をつけて何枚目が表示されているかわかるように最低のスタイルをつけています。

/* スライダー部分 */
.click_slider_wrapper{
    display: flex;
}
.slider_item{
    opacity: 0;
    width: 400px;
    height: 200px;
    transform: translateX(100%);
}
.cl01{
  background-color:#ebd7c3;
}
.cl02{
  background-color:#e2ebc3;
}
.cl03{
  background-color:#c3ebde;
}
.cl04{
  background-color:#ebc3d4;
}
._show{
    opacity: 1;
    transform: translateX(0);
    transition: transform 0.5s ease, opacity 0.5s ease;
}

javascript

jsに不慣れなため、何をしたいのか日本語で書いてから記述を考えました。
もう少し省略して書けるところもあるかもしれませんが、今自分が理解しやすい形で記載しています。

// ------------------
//  スライダーの処理
// ------------------

// slider_itemクラス要素を取得
// ★取得する要素が複数なので[querySelectorAll]を使う
const sliderItems = document.querySelectorAll('.slider_item');

// click_slider_wrapperクラス要素を取得
const clickSliderWrapper = document.querySelector('.click_slider_wrapper');


// next_btnがクリックされたら
document.querySelector('.next_btn').addEventListener('click', () => {
    // _showクラスを持つ要素を取得
    const sliderItemsShow = document.querySelector('.slider_item._show');


    //もし、 slider_item要素に_showクラスがついていたら
    if (sliderItemsShow) {
        // _showクラスを外す
        sliderItemsShow.classList.remove('_show');

        // 次の要素が存在する場合、その要素に_showクラスを追加する
        // ★[nextElementSibling]=読み取り専用のプロパティ.この要素の親の子リスト内ですぐ次にある要素を返す.
        const nextSliderItems = sliderItemsShow.nextElementSibling;
        if (nextSliderItems) {
            nextSliderItems.classList.add('_show');

            // 表示させる位置を調整する
            const offset = nextSliderItems.offsetLeft;
            clickSliderWrapper.style.transform = `translateX(-${offset}px)`;

        } else {
            // そうではない(=最後の要素)場合、最初の要素に戻る(最初の要素を表示させる)
            sliderItems[0].classList.add('_show');

            // 表示させる位置を調整する
            clickSliderWrapper.style.transform = 'translateX(0)';
        }
    }

});


// prev_btnがクリックされたら
document.querySelector('.prev_btn').addEventListener('click', () => {
    // _showクラスを持つ要素を取得
    const sliderItemsShow = document.querySelector('.slider_item._show');


    //もし、 slider_item要素に_showクラスがついていたら
    if (sliderItemsShow) {
        // _showクラスを外す
        sliderItemsShow.classList.remove('_show');

        // 前の要素が存在する場合、その要素に_showクラスを追加する
        // ★[previousElementSibling]=読み取り専用のプロパティ.この要素の親の子リスト内で前にある要素を返す.
        const prevSliderItems = sliderItemsShow.previousElementSibling ;
        if (prevSliderItems) {
            prevSliderItems.classList.add('_show');

            // 表示させる位置を調整する
            const offset = prevSliderItems.offsetLeft;
            clickSliderWrapper.style.transform = `translateX(-${offset}px)`;

        } else {
            // そうではない(=最初の要素)場合、最後の要素に戻る(最後の要素を表示させる)
            sliderItems[sliderItems.length - 1].classList.add('_show');

            // 表示させる位置を調整する
            const offset = sliderItems[sliderItems.length - 1].offsetLeft;
            clickSliderWrapper.style.transform = `translateX(-${offset}px)`;
        }
    }

});

完成したもの

実装内容

HTML

CSS

javascript

Discussion