BLOGスタッフブログ

【Swiper】スライド3つを連動させる

こんにちは。

最近、自動で動くスライダーを複数作った際にだんだん動きがずれていく課題に直面しました。

なので、今回制作したスライダーと動きの調整方法をご紹介したいと思います。

HTML

まず制作したスライダーのHTMLソースコードは以下の通りです。

スライダー3つにそれぞれ画像を5枚入れています。

<div class="topmv_container">
    <!-- 一つ目のスライダー -->
    <div class="topmv_item">
        <!-- Swiper START -->
        <div class="top_swiper-container swiper1">
            <!-- メイン表示部分 -->
            <div class="swiper-wrapper">
                <!-- 各スライド -->
                <div class="swiper-slide"><a href="#"><img src="/img/mv1_1.jpg" alt=""></a> </div>
                <div class="swiper-slide"><a href="#"><img src="/img/mv1_2.jpg" alt=""></a> </div>
                <div class="swiper-slide"><a href="#"><img src="/img/mv1_3.jpg" alt=""></a> </div>
                <div class="swiper-slide"><a href="#"><img src="/img/mv1_4.jpg" alt=""></a> </div>
                <div class="swiper-slide"><a href="#"><img src="/img/mv1_5.jpg" alt=""></a> </div>
            </div>
        </div>
        <!-- Swiper END -->
    </div>

    <!-- 二つ目のスライダー -->
    <div class="topmv_item">
        <!-- Swiper START -->
        <div class="top_swiper-container swiper2">
            <!-- メイン表示部分 -->
            <div class="swiper-wrapper">
                <!-- 各スライド -->
                <div class="swiper-slide"><a href="#"><img src="/img/mv2_1.jpg" alt=""></a> </div>
                <div class="swiper-slide"><a href="#"><img src="/img/mv2_2.jpg" alt=""></a> </div>
                <div class="swiper-slide"><a href="#"><img src="/img/mv2_3.jpg" alt=""></a> </div>
                <div class="swiper-slide"><a href="#"><img src="/img/mv2_4.jpg" alt=""></a> </div>
                <div class="swiper-slide"><a href="#"><img src="/img/mv2_5.jpg" alt=""></a> </div>
            </div>
        </div>
        <!-- Swiper END -->
    </div>

    <!-- 三つ目のスライダー -->
    <div class="topmv_item">
        <!-- Swiper START -->
        <div class="top_swiper-container swiper3">
            <!-- メイン表示部分 -->
            <div class="swiper-wrapper">
                <!-- 各スライド -->
                <div class="swiper-slide"><a href="#"><img src="/img/mv3_1.jpg" alt=""></a> </div>
                <div class="swiper-slide"><a href="#"><img src="/img/mv3_2.jpg" alt=""></a> </div>
                <div class="swiper-slide"><a href="#"><img src="/img/mv3_3.jpg" alt=""></a> </div>
                <div class="swiper-slide"><a href="#"><img src="/img/mv3_4.jpg" alt=""></a> </div>
                <div class="swiper-slide"><a href="#"><img src="/img/mv3_5.jpg" alt=""></a> </div>
            </div>
        </div>
        <!-- Swiper END -->
    </div>
</div>

JavaScript

//swiper1
var mySwiper1 = new Swiper('.swiper1', {
	controller: {
		control: mySwiper3,
		inverse: false,
		by: 'slide'
	},
	effect: 'slide',
	speed: 1000,
	loop: true,
});
//swiper2
var mySwiper2 = new Swiper('.swiper2', {
    controller: {
		control: mySwiper1,
		inverse: false,
		by: 'slide'
	},
	effect: 'slide',
	speed: 1000,
	loop: true,
});
//swiper3
var mySwiper3 = new Swiper('.swiper3', {
    controller: {
		control: mySwiper2,
		by: 'slide'
	},
	effect: 'fade',
	speed: 1000,
	loop: true,
	autoplay: {
		delay: 6000,
		stopOnLastSlide: false,
		disableOnInteraction: false,
		reverseDirection: false
	},
});

ポイント

・HTMLのクラス(swiper1~3)にあわせてJavaScript(mySwiper1~3、swiper1~3)を変更  

スライダーを複数作る際にはそれぞれにswiperを指定します。

・controllerモジュールで連動させる

スライド送りのスピードやタイミングをそろえたいと思います。

controllerモジュールを使用し、swiper2はswiper1をコントロールする、swiper3はswiper2をコントロールする、というような指定をしています。

これでswiper3が動けばswiper2が動き、swiper2が動けばswiper1が動くようになります。

・autoplayモジュールを一番最後のswiperのみに指定

今回、自動で画面がくるくる変わるように動かしたいので、autoplayモジュールを入れています。

そして、このautoplayモジュールをすべてのスライダーに適用させてしまうと動きがカクついたり一つのスライダーだけ先送りされたり、だんだん動きがずれていってしまいました。

なので、一番最後のswiper3にのみautoplayモジュールを入れました。

複数のスライダーがすべて同じ動きであれば、JavaScriptのswiper一つで良いようです。今回は3つ目のスライダーのみ横スライドではなくフェードで切り替わる設定にしているため、一つのスライダーごとに指定しました。

swiperが正常な動きをしないと悩み1週間以上たっていましたが、autoplayを一か所のみに書くだけで解決しました。

それでは。

インソースマーケティングデザインが書いた他の記事

見積もり・ご依頼など、
お気軽にご相談ください

本サイトはユーザーエクスペリエンスの向上などを目的に、Cookieを使用しています。
右記のバナーで「同意する」をクリックする、または本サイトを利用することにより、
お客様は弊社のCookieポリシーに同意したことになります。

同意します