【Swiper】ネストスライダーを作成する

当記事では、Swiper.jsを使用してスライダーが入れ子になったネストスライダーを作成する方法とその注意点についてデモ付きで記します。

通常のSwiper.jsでのスライダーの作成はご存じの前提で進めさせていただきますので、Swiper.jsを初めて使う方はこちらから先に参考いただければと思います。
Swiper.jsでスライダーを実装する

子スライダーが横向きのネストスライダー
子スライダーが縦向きのネストスライダー

子スライダーが横向きのネストスライダー

子スライダーが横向きのネストスライダーの作成方法はとても簡単で、各swiper-slideの中にさらにスライダーを用意するだけです。下記は横3×縦3の合計9スライドのネストスライダーになります。

※1点だけ注意点があるのでデモの下に青枠で記しております。

<!DOCTYPE html>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<style>
    .swiper img{
        width: 100%;
    }
    .nested-slider-h {
        background-color: #CFD8DC;
        width: 50vw;
        padding: 40px 0!important;
    }
    .nested-slider-h .nested-slider-child{
        width: 80%;
    }
</style>

<div class="swiper nested-slider-h">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="swiper nested-slider-child">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="./img/sample1-1.png"></div>
                    <div class="swiper-slide"><img src="./img/sample1-2.png"></div>
                    <div class="swiper-slide"><img src="./img/sample1-3.png"></div>
                </div>
                <div class="swiper-pagination"></div>
                <div class="swiper-button-prev child-navi-prev"></div>
                <div class="swiper-button-next child-navi-next"></div>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="swiper nested-slider-child">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="./img/sample2-1.png"></div>
                    <div class="swiper-slide"><img src="./img/sample2-2.png"></div>
                    <div class="swiper-slide"><img src="./img/sample2-3.png"></div>
                </div>
                <div class="swiper-pagination"></div>
                <div class="swiper-button-prev child-navi-prev"></div>
                <div class="swiper-button-next child-navi-next"></div>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="swiper nested-slider-child">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="./img/sample3-1.png"></div>
                    <div class="swiper-slide"><img src="./img/sample3-2.png"></div>
                    <div class="swiper-slide"><img src="./img/sample3-3.png"></div>
                </div>
                <div class="swiper-pagination"></div>
                <div class="swiper-button-prev child-navi-prev"></div>
                <div class="swiper-button-next child-navi-next"></div>
            </div>
        </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev parent-navi-prev"></div>
    <div class="swiper-button-next parent-navi-next"></div>
</div>


<script>
    new Swiper('.nested-slider-h', {  
        loop: true,    
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: ".parent-navi-next",
            prevEl: ".parent-navi-prev",
        },
    })
    new Swiper('.nested-slider-h .nested-slider-child', {
        loop: true,
        nested: true, 
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: ".child-navi-next",
            prevEl: ".child-navi-prev",
        },
    })
</script>

子スライダーが横向きのネストスライダーができました！

親スライダーと子スライダーのナビゲーションのクラスを同じにしていると、挙動がおかしくなる（子スライダーのナビゲーションをクリックした時に親スライダーも一緒に動いてしまう）ため、違うクラス名を使用する必要があります。
上記では、デフォルトのswiper-button-next/prevクラスは見た目のために残したまま、parent-navi-next/prevクラスとchild-navi-next/prevクラスをナビゲーション要素に付与し、Swiperオプションでそれを指定しています。

また、子スライダーをドラッグして動かせるようにするために、nested: trueを指定するのが重要ポイントになります。

子スライダーが縦向きのネストスライダー

子スライダーが縦向きのネストスライダーを作成するには先ほどのコードに少し修正を加えます。

・親スライダーのクラスをnested-slider-hからnested-slider-vに（クラス名は任意だが重複しないように）
・子スライダーのSwiperオプションにdirection: “vertical”を追加
・スタイルをいくつか追加

<!DOCTYPE html>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<style>
    .swiper img{
        width: 100%;
    }
    .nested-slider-v {
        background-color: #CFD8DC;
        width: 50vw;
        height: 29vw;
    }
    .nested-slider-v .swiper-slide {
        display: flex;
        align-items: center;
    }
    .nested-slider-v .nested-slider-child [class^=swiper-button]{
        transform:rotate(90deg);
        top: initial;
        left: initial;
        right: 10px;
        margin: 0;
    }
    .nested-slider-v .nested-slider-child .swiper-button-prev{
        top:0;
    }
    .nested-slider-v .nested-slider-child .swiper-button-next{
        bottom:0;
    }
    .nested-slider-v .nested-slider-child .swiper-pagination{
        right:20px;
    }
    .nested-slider-v .nested-slider-child{
        width: 80%;
        height: 80%;
    }
</style>

<div class="swiper nested-slider-v">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="swiper nested-slider-child">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="./img/sample1-1.png"></div>
                    <div class="swiper-slide"><img src="./img/sample1-2.png"></div>
                    <div class="swiper-slide"><img src="./img/sample1-3.png"></div>
                </div>
                <div class="swiper-pagination"></div>
                <div class="swiper-button-prev child-navi-prev"></div>
                <div class="swiper-button-next child-navi-next"></div>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="swiper nested-slider-child">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="./img/sample2-1.png"></div>
                    <div class="swiper-slide"><img src="./img/sample2-2.png"></div>
                    <div class="swiper-slide"><img src="./img/sample2-3.png"></div>
                </div>
                <div class="swiper-pagination"></div>
                <div class="swiper-button-prev child-navi-prev"></div>
                <div class="swiper-button-next child-navi-next"></div>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="swiper nested-slider-child">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="./img/sample3-1.png"></div>
                    <div class="swiper-slide"><img src="./img/sample3-2.png"></div>
                    <div class="swiper-slide"><img src="./img/sample3-3.png"></div>
                </div>
                <div class="swiper-pagination"></div>
                <div class="swiper-button-prev child-navi-prev"></div>
                <div class="swiper-button-next child-navi-next"></div>
            </div>
        </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev parent-navi-prev"></div>
    <div class="swiper-button-next parent-navi-next"></div>
</div>

<script>
    new Swiper('.nested-slider-v', {  
        loop: true,            
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: ".parent-navi-next",
            prevEl: ".parent-navi-prev",
        },
    })
    new Swiper('.nested-slider-v .nested-slider-child', {
        loop: true,
        direction: "vertical",
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: ".child-navi-next",
            prevEl: ".child-navi-prev",
        },
    })
</script>

子スライダーが縦向きのネストスライダーができました！