【Swiper】スライド３つを連動させる｜スタッフブログ｜株式会社インソースマーケティングデザイン

Webクリエイター

青山瑞季

2023.05.26 コーディング

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

こんにちは。

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

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

1 HTML
2 JavaScript
3 ポイント

HTML

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

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

<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
	},
});