【Swiper】ダブルスライダーを作成する【連動】

double_slider

swiper.jsを使用して、メインのスライドとテキストのスライドが連動して動くダブルスライダーを作成する方法について記します。


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




①メインのスライダーを作成する

わかりやすいように、最初にメインのSwiperスライダーを作成して、そこから変更を加えていきます。

<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{
        width: 70%;
    }
    .swiper img{
        width: 100%;
    }
</style>


<div class="swiper swiper_main">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="./img/sample1.png"></div>
        <div class="swiper-slide"><img src="./img/sample2.png"></div>
        <div class="swiper-slide"><img src="./img/sample3.png"></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>


<script>
    const swiper_main = new Swiper('.swiper_main', {
        loop: true,                         
        autoplay: {                         
            delay: 2000,  
        },         
        pagination: {
            el: '.swiper-pagination',
        },                
        navigation: {                       
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    })
</script>

メインのスライダーができました。

slide_image1
slide_image2
slide_image3




②テキストのスライダーを作成

メインスライダーに連動して動くスライダーなので、矢印もドットもいりません。

<style>
    .swiper_text{
        width: 50%;
        border-radius:15px;
        background-color: #B0BEC5;
        padding: 30px 0;
        margin-top: 20px;
        display: flex;
        justify-content: center;
    }
    .swiper_text .swiper-slide{
        display: flex;
        justify-content: center;
    }
</style>
<div class="swiper swiper_text">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <p class="txt">
                スライド1のテキストが入ります<br>
                スライド1のテキストが入ります<br>
                スライド1のテキストが入ります<br>
            </p>
        </div>
        <div class="swiper-slide">
            <p class="txt">
                スライド2のテキストが入ります<br>
                スライド2のテキストが入ります<br>
                スライド2のテキストが入ります<br>
            </p>
        </div>
        <div class="swiper-slide">
            <p class="txt">
                スライド3のテキストが入ります<br>
                スライド3のテキストが入ります<br>
                スライド3のテキストが入ります<br>
            </p>
        </div>
    </div>
</div>


<script>
    //追記(メインのスライダーのスクリプトの上に)
    const swiper_text = new Swiper(".swiper_text", {
        loop: true, 
        slidesPerView: 1,
    })
</script>
テキストスライダーのインスタンス化は必ずメインのスライダーの上で行います。そうしないと後々メインスライダーと連携する際にエラーが出てしまいます。


テキストスライダーが追加されました。

まだ二つのスライダーは連動していません。

slide_image1
slide_image2
slide_image3

スライド1のテキストが入ります
スライド1のテキストが入ります
スライド1のテキストが入ります

スライド2のテキストが入ります
スライド2のテキストが入ります
スライド2のテキストが入ります

スライド3のテキストが入ります
スライド3のテキストが入ります
スライド3のテキストが入ります




③メインスライダーとテキストスライダーを連動させる

下記のようにメインスライダーのオプションに3行追記して、テキストスライダーを連動させます。
swiper: の後にはテキストスライダーのクラスを指定します。

const swiper_main = new Swiper('.swiper_main', {
    loop: true,                         
    autoplay: {                         
        delay: 2000,  
    },
    pagination: {
        el: '.swiper-pagination',
    },                  
    navigation: {                       
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    thumbs: {                           //追記
        swiper: swiper_text,            //追記
    },                                  //追記
})

メインスライダーとテキストスライダーが連動しました!
メインスライダーの動きに合わせてテキストスライダーが動くと思います。

slide_image1
slide_image2
slide_image3

スライド1のテキストが入ります
スライド1のテキストが入ります
スライド1のテキストが入ります

スライド2のテキストが入ります
スライド2のテキストが入ります
スライド2のテキストが入ります

スライド3のテキストが入ります
スライド3のテキストが入ります
スライド3のテキストが入ります





④テキストスライダーのスワイプを無効化

今の状態では、テキストスライダーをスワイプするとスライドを動かすことができ、メインスライダーとのずれが生じてしまうので、スワイプを無効化します。

allowTouchMoveオプションをfalseにすることで、スワイプを無効化できます。

const swiper_text = new Swiper(".swiper_text", {
    loop: true, 
    slidesPerView: 1,
    allowTouchMove: false,
})

テキストスライダーがスワイプできなくなっていればOKです。

slide_image1
slide_image2
slide_image3

スライド1のテキストが入ります
スライド1のテキストが入ります
スライド1のテキストが入ります

スライド2のテキストが入ります
スライド2のテキストが入ります
スライド2のテキストが入ります

スライド3のテキストが入ります
スライド3のテキストが入ります
スライド3のテキストが入ります




ソースコード全文

最後にソースコードを全文載せておきます。

<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{
        width:70%;
    }
    .swiper img{
        width: 100%;
    }
    .swiper_text{
        width: 50%;
        border-radius:15px;
        background-color: #B0BEC5;
        padding: 30px 0;
        display: flex;
        justify-content: center;
    }
    .swiper_text .swiper-slide{
        display: flex;
        justify-content: center;
    }
</style>


<div class="swiper swiper_main">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="./img/sample1.png"></div>
        <div class="swiper-slide"><img src="./img/sample2.png"></div>
        <div class="swiper-slide"><img src="./img/sample3.png"></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

<div class="swiper swiper_text">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <p class="txt">
                スライド1のテキストが入ります<br>
                スライド1のテキストが入ります<br>
                スライド1のテキストが入ります<br>
            </p>
        </div>
        <div class="swiper-slide">
            <p class="txt">
                スライド2のテキストが入ります<br>
                スライド2のテキストが入ります<br>
                スライド2のテキストが入ります<br>
            </p>
        </div>
        <div class="swiper-slide">
            <p class="txt">
                スライド3のテキストが入ります<br>
                スライド3のテキストが入ります<br>
                スライド3のテキストが入ります<br>
            </p>
        </div>
    </div>
</div>


<script>
    const swiper_text = new Swiper(".swiper_text", {
        loop: true, 
        slidesPerView: 1,
        allowTouchMove: false,
    })
    const swiper_main = new Swiper('.swiper_main', {
        loop: true,                         
        autoplay: {                         
            delay: 2000,  
        },
        pagination: {
            el: '.swiper-pagination',
        },                  
        navigation: {                       
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
        thumbs: {                           
            swiper: swiper_text,            
        },                                  
    })
</script>




以上、swiper.jsでダブルスライダーを作成する方法でした。


二つのスライダーを連動させて作成するものとして下記のようなスライダーもあります。
【Swiper】サムネイル付きのスライダーを作成する


また、下記ではswiper.jsで作成できる様々なスライダーを紹介しています。
Swiperスライダーのデモ22選

スポンサーリンク

You can subscribe by SNS

スポンサーリンク

コメントを残す

*