【Swiper】2つのスライドを連動して動かす方法

Swiper
記事内に商品プロモーションを含む場合があります。

Swiperを使って、2つのスライドを連動して動かしたい。

こんにちは。

フリーランスWebコーダーの、たけちです。

コーディングのお仕事や勉強をしているとき、「2つのスライドを連動させたいけど、一体どうすればいいんだろう？」と悩んだことはありませんか？

下にサンプルを用意しましたが、どちらを動かしてもお互い連動することがわかると思います（矢印やページネーションのドットをクリックしてみてください）。

See the Pen Untitled by たけち (@kwxteqls-the-scripter) on CodePen.

本記事では、上記のようにswiperを使って2つのスライドを連動して同時に動かす方法について、わかりやすく解説します。

「swiperの連動ってむずかしそう…」という方でも、この記事を読み終えた頃には「意外と簡単！」と感じると思いますので、ぜひ最後までお付き合いください！

スポンサーリンク

【Swiper】2つのスライドを連動して動かす方法

Swiperを使って２つのスライドを連動させるには、次の2ステップで作業します。

  1. ２つのswiperを用意する
  2. controllerで２つのswiperを紐付ける

では、順番にやってみましょう！

2つのswiperを用意する

まずは、下記のように2つのswiperをHTML内に記述します。

なお、2つのswiperを区別するために、１つめのidを「swiper1」、2つめのidを「swiper2」としています。

<!-- １つめのスライド -->
<div id="swiper1" class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide _red">SLIDE 1-1</div>
    <div class="swiper-slide _blue">SLIDE1-2</div>
    <div class="swiper-slide _orange">SLIDE1-3</div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

<!-- ２つめのスライド -->
<div id="swiper2" class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide _red">SLIDE2-1</div>
    <div class="swiper-slide _blue">SLIDE2-2</div>
    <div class="swiper-slide _orange">SLIDE2-3</div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

Swiperを動かすためのJavaScriptはこちらです。

今回は、loopをtrueとし、ページネーションと矢印の機能をオンにしています。

なお、この時点では２つのSwiperは連動しておらず、別々に動作します。

const swiper1 = new Swiper('#swiper1', {
  loop:true,
  pagination: {
    el: '.swiper-pagination',
    clickable:true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

const swiper2 = new Swiper('#swiper2', {
  loop:true,
  pagination: {
    el: '.swiper-pagination',
    clickable:true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

controllerで２つのswiperを紐付ける

２つのSwiperを連動させるために、controllerを使って、JavaScriptファイル内に下記を追記します。

const swiper1 = new Swiper('#swiper1', {
  loop:true,
  pagination: {
    el: '.swiper-pagination',
    clickable:true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

const swiper2 = new Swiper('#swiper2', {
  loop:true,
  pagination: {
    el: '.swiper-pagination',
    clickable:true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

// 以下を追記
swiper1.controller.control = [swiper2];
swiper2.controller.control = [swiper1];

これで、swiper1とswiper2の２つのスライドが連動するようになりました！

See the Pen Untitled by たけち (@kwxteqls-the-scripter) on CodePen.