2023.05.26 コーディング
【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を一か所のみに書くだけで解決しました。
それでは。