swiperで自動で右方向に流れつつ一定時間経つと切り替わるようなスライダーを実装してみる（備忘録）

今回は、swiperで自動で右方向に流れつつ一定時間経つと切り替わるようなスライダーを実装について紹介していきます。

やり方は自己流です。もっといいやり方があると思いますが、思いついたやり方で実装はできましたので紹介していきます。

実際にデモを見ていただく方がイメージできると思います。

それではやっていきましょう。

HTMLの記述について

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Swiperスライダー</title>
  <link rel="stylesheet" href="../reset.css">
  <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <main>
    <div class="bl_slider_column">
      <div class="swiper slider01 js_fade">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="swiper-img" data-swiper-parallax-x="90%">
              <img src="./images/img_slider01_01.webp" alt="スライダー1枚目" width="1280" height="853">
            </div>
          </div>
          <div class="swiper-slide">
            <div class="swiper-img" data-swiper-parallax-x="90%">
              <img src="./images/img_slider01_02.webp" alt="スライダー2枚目" width="1280" height="853">
            </div>
          </div>
        </div>
      </div>
      <div class="swiper slider02 js_fade">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="swiper-img" data-swiper-parallax-x="90%">
              <img src="./images/img_slider01_01.webp" alt="スライダー1枚目" width="1280" height="853">
            </div>
          </div>
          <div class="swiper-slide">
            <div class="swiper-img" data-swiper-parallax-x="90%">
              <img src="./images/img_slider01_02.webp" alt="スライダー2枚目" width="1280" height="853">
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
  <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
  <script src="style.js"></script>
</body>

</html>

今回はスライダーを2つ用意しました。1つ目にはslider01のclassを、2つ目にはslider02のclassをつけています。また切り替わる画像は各スライダーに対して2つ用意しています。

その他は基本的なswiperスライダーの作成方法と変わりませんが、パララックスを使いたいので、data-swiper-parallax-xを90%に設定しています。

90%にしているのは、右方向に画像を流すときに親要素からはみ出た分を考慮しているからです。今回は画像を10%はみ出して対応しています。
この数字はその後のCSSの設定にも絡んできますが、任意の数字を入れて調整ができます。

data-swiper-parallax-xについては、下記公式を参考にしてみてください。
The Most Modern Mobile Touch Slider

CSSの記述について

@charset "utf-8";

/* ==========================
  初期設定
========================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  position: relative;
  word-wrap: break-word;
}

img {
  width: 100%;
}

/* スライダー */
.bl_slider_column {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
.swiper {
  width: 100%;
}
.swiper-slide {
  overflow: hidden;
}
.swiper-slide img {
  height: auto;
  width: 110%;
}
.swiper-slide.swiper-slide-active img {
  animation: swiper_animation linear 20s 0s infinite;
}
@keyframes swiper_animation {
  0% {
    translate: -5% 0;
  }
  100% {
    translate: 15% 0;
  }
}

swiper-slideに対して、overflowをhiddenに設定し、その中のimgに対してwidthを110％に設定しています。これでswiper-slideから10％はみ出た領域を作っています。

あとは animationで画像が横に流れる処理を書いていきます。
今回はtaranslateのxが-5％から15%の距離分（合計10％分）動くよう設定しています。

JavaScriptの記述について

"use strict";

// スライダー1
const swiper1 = new Swiper(".swiper.slider01", {
  loop: true, // ループ
  parallax: true, // パララックス
  allowTouchMove: false, // マウスでのスワイプ禁止
  speed: 1500, // 速度
  autoplay: {
    reverseDirection: true, // 逆再生
    delay: 3000, // 3秒遅らせる
  },
});
// スライダー2
const swiper2 = new Swiper(".swiper.slider02", {
  loop: true, // ループ
  parallax: true, // パララックス
  allowTouchMove: false, // マウスでのスワイプ禁止
  speed: 1500, // 速度
  autoplay: {
    reverseDirection: true, // 逆再生
    delay: 3000, // 3秒遅らせる
  },
});

こちらはコメントアウトに入れているとおりですので、特に解説はしません。

最後に改めてデモを載せておきます。

demo

以上になります。