[Swiper]連続して横方向にゆっくり動くスライダーをswiperでつくる方法[WordPress]

【tedate owner よりお知らせ】
会員限定記事の配信始めました。ご登録いただくと閲覧が可能になります。
「tedate Premium のご紹介」
詳しくは、上記URLの記事をご参照ください。

コードのご紹介

const theWrapper = document.getElementById('swiperWrapper');
const mySwiper = new Swiper('.swiper-container', {
  allowTouchMove: false,
  freeMode: true,
  loop: true,
  loopedSlides: 6,
  slidesPerView: 3,
  speed: 3000,
  autoplay: {
    delay: 0,
  },
  pagination: {
    el: '.swiper-pagination',
  },
  on: {
    slideChangeTransitionStart: function(){
      theWrapper.style.transitionTimingFunction = 'linear';
    }
  },
});

swiperを使用する基本的なファイル構成は、冒頭にも書いたように、次の記事に書いてある内容のとおりです。
該当記事：[WordPress] Swiper と WordPress の連携
↑この記事の中にあるファイル構成の、swiperの設定を記述してあるファイル（上記記事の例だと swiper-setting.js ）を編集していく形になります。

では各行の解説です。
1行目は、html内の id="swiperWrapper" をもつ要素をjavascriptで取得。変数 theWrapper に格納しています。これは後で、15~18行目で使用します。
2行目〜8行目まで並んでいる基本的なオプションは、一般的なスライダーを表示する場合と大差ありません。
今回の実装したい内容を満たすべく、
4行目で freeMode を true に(これにより、swiper のスライダーが定位置で止まるのではなく、任意の位置で止まる様になります)。
5行目で loop を true にしています。
6行目の loopedSlides は、末尾のスライダーの後にいくつスライダーを複製しておくかを定義（これの数が少なすぎると、勢い良くスワイプした場合などに空白が出ます）。
7行目では、静止している初期状態の1画面を基準に、何件のスライドを表示させるかを定義。（この設定で、個々のスライドの横幅が自動で決まります）
8行目はスライド1枚が現在地から自身の横幅分、何秒かけて移動するかのスピードをミリ秒で定義（上記の例の場合は3秒）。
9~11行目は自動再生を有効にする autoplay を設定していますが、ここが重要です。
10行目で、delay を設定していますが、この値を 0 にすると、遅延なし、つまり連続した移動をさせることができます。
この指定だけではまだ期待どおりの動作にならないのですが、
15~18行目で指定しているイージングの設定を組み合わせることで、冒頭の動画の様な、ゆっくり動き続ける横スクロール型のスライダーが作成できます。

なお、3行目で allowTouchMove: false としているのは、今回の様に横方向に自動で動き続ける無限スクロールを行う場合、スワイプ操作を制限しておいた方が運用上、なにかと動作が安定するためにそうしています。もしご自身がJavaScriptの熟練者の方で、この程度の柔軟な制御は自由自在だよ、という場合はこの1行を外せばスワイプ操作を受け付ける様に設定することも可能です。なのですが、今回の様な自動で動き続ける無限ループ形式のスライダーを作る場合、個人的にはこのオプションを外すのはあまりお勧めはしません。

15行目~18行目の on: について

15行目〜18行目は、swiper に任意のイベントが起きたタイミングで、何らかの関数を実行させるための記述で、
今回は slideChangeTransitionStart (スライダーのTransitionが動き始める時) というイベントが swiper で発生したタイミングで、
対象の要素のイージングを linear に指定する、
という記述です。※「イージング」というのはアニメーションに関係する概念です。「その動きが開始されてから収束するまで、どんな動きをするのか」、というものを表した概念になります。
なお slideChangeTransitionStart など、swiperで取得できる任意のイベント一覧は以下リンク先の、swiper公式ページにある通りです。
Swiper API

swiper がスライドを遷移させる際に使う、デフォルトのイージングは ease という動きで、
イメージとしては、「アニメーションの開始時、終了時ともに、ゆるやかに始まり、ゆるやかに収束していく」動きです。
これを「連続で、一定の感覚を保った動き」に変更しないと、冒頭にご紹介したスライダーの様な動作にならないため、この部分で明確に
linear という値を指定している、というわけです。
9~11行目で指定した autoplay: { delay: 0, },
そして
15~18行目で指定しているイージングの指定、
この両方を組み合わせると、冒頭にご紹介したスライダーの様な、連続した横方向の動きになる、というわけです。

実際に動くサンプル

今回も、実際に動いているサンプルを用意しました。
次のリンクより、確認してみてください。
swiperのサンプル_横方向の自動スクロール

補足：html側はどんな感じにすれば良いか（WordPressのテンプレートを想定)

html側は以下コードの様に、例えばこんな感じで用意します（WordPressのテンプレートを想定しています)。
この部分は、以前の記事でも触れているので詳細説明は省きます。
WordPressからどうやって記事を取得すれば良いか等の詳しい説明は、以前の記事( [WordPress] Swiper と WordPress の連携 ) を参照いただくとして、
今回変更している点は、12行目のdiv要素に id="swiperWrapper" を追加している点です。
これを、js側で取得、変数に格納しておいて、イージングの挙動を変更している、という形になります。

<?php
  $slideargs = array(
    'post_type' => 'post',
    'post_status' => 'publish',
    'orderby' => 'rand',
    'posts_per_page' => 5
    );
  $the_query = new WP_Query($slideargs);
?>
<div id="swiperContainer" class="swiper-container">
  <div id="swiperWrapper" class="swiper-wrapper">
   <?php if ($the_query->have_posts()): while ($the_query->have_posts()): $the_query->the_post(); ?>
   <!-- Slides -->
   <div class="swiper-slide m-slider-child">
      <div class="m-slider-desc">
        <a href="<?php the_permalink();?>" target="_blank">
          <?php if(has_post_thumbnail()): ?>
            <img src="<?php the_post_thumbnail_url('large'); ?>" alt="<?php the_title(); ?>">
          <?php endif; ?>
          <div class="m-slider-text">
            <p><?php the_title(); ?></p>
          </div><!-- pair of m-slider-text -->
        </a>
      </div><!-- pair of m-slider-desc -->
    </div><!-- pair of swiper-slide, m-slider-child -->
    <!-- Slides -->
    <?php endwhile; ?>
    <?php wp_reset_postdata(); ?>
    <?php endif; ?>
  </div><!-- pair of swiper-wrapper -->
  <div class="swiper-pagination"></div>
</div><!-- pair of swiper-container -->