Suffix Official Blogサフィックス公式ブログ

実装イメージを確認

まず画面幅ごとのスライダーのイメージを確認します。
768px以上では横並びのスライダーです。
スライドは中央配置。自動でスライドするようにし、マウスや指でもスライドできるようにしています。
画面幅767px以下ではスライダー機能をOFF、純粋な縦並びにしたいと思います。

.container {
    display: flex;
    justify-content: center;
}

.slider {
    max-width: 640px;
    min-height: 300px;
}

.swiper-wrapper {
    display: flex;
    flex-direction: column;
    width: max-content;
    align-items: center;
}

.swiper-slide {
    box-sizing: border-box;
    height: 200px !important;
    width: 320px !important;
    padding: 20px;
    margin-block: 10px;
    color: #333;
    font-size: 3rem;
    text-align: center;
    align-content: center;
    background: lightcoral;
}

@media (min-width: 768px) {
    .container {
        overflow-x: hidden;
    }

    .swiper-wrapper {
        flex-direction: row;
    }

    .swiper-slide {
        height: 260px !important;
        width: 600px !important;
        margin-inline: 20px;
    }
}

let slider;

function createSlider() {
    slider = new Swiper('.slider', {
        autoplay: {
            delay: 3000,
            disableOnInteraction: false
        },
        loop: true,
        centeredSlides: true,
        slidesPerView: 'auto',
    });
}

スライダーのON/OFFを切り替える(ロード時)

画面幅に応じてON/OFFを切り替えるにはブレイクポイントで条件分岐します。
まずは画面幅768px以上の時だけスライダーが作成されるように、
ページのロード時に実行される処理を書きます。

let slider;

document.addEventListener('DOMContentLoaded', () => {
    if (window.innerWidth >= 768) {
        createSlider(); 
    } else if (window.innerWidth < 768) {
        slider.destroy(false, true);
    }
})

これで画面幅768px以上の端末ではスライダーが作成され、
それ767px以下の端末では作成されないので、横並びと縦並びで表示することができます。

ただこれだとブラウザ幅が変わった時に状態が切り替わらないので不完全です。
ブラウザ幅の変更にも対応させるために、コードを修正します。

スライダーのON/OFFを切り替える(ブラウザ幅の変更に対応)

ブラウザ幅の変更に対応する時は、ブレイクポイントだけで条件分岐しても上手く動きません。
スライダーが作成済かどうかも同時に判定する必要があります。
それを踏まえて、リサイズ時に実行される処理を書きます。

let slider;
let isSlider;

document.addEventListener('DOMContentLoaded', () => {
    if (window.innerWidth >= 768) {
        createSlider();
    } else if (window.innerWidth < 768) {
            slider.destroy(false, true); 
    } 
})
window.addEventListener('resize', () => {
    if (window.innerWidth >= 768 && !isSlider) {
        createSlider();
        isSlider = true;
    } else if (window.innerWidth < 768 && isSlider) {
        slider.destroy(false, true);
        isSlider = false;
    }
})

作成 or 解除と同時にisSliderの値を更新し、スライダーが作成済かどうかを管理しています。値がtrueの時は新たにスライダーは作成されませんし、falseの時は解除されません。
これでブラウザ幅が変わった時もスライダーのON/OFFが切り替わるようになりました。

コードをまとめる

これでスライダーの切り替えはできたので、最後にコードを見やすくします。
ロード時とリサイズ時の条件分岐はほぼ同じコードなので、一つの関数にまとめられます。

let slider;
let isSlider;

document.addEventListener('DOMContentLoaded', () => {
    hundleSlider();
})

window.addEventListener('resize', () => {
    hundleSlider();
})

function hundleSlider() {
    if (window.innerWidth >= 768 && !isSlider) {
        createSlider(); isSlider = true;
    } else if (window.innerWidth < 768 && isSlider) {
        slider.destroy(false, true); isSlider = false;
    }
}

こうするとコードが少し見やすくなります。
スライダーが複数になった場合も変数と関数を複製して名前を変えるだけで対応できます。
(この投稿のサンプルもその方法で対応しています)
ライブラリを活用して快適な制作ライフを過ごしましょう。