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

SwiperとWordPressの連携

先日の記事では、jQueryに依存しない高機能スライダー系スクリプト、swiper を WordPress に組み込む方法をご紹介しました。
該当記事: [WordPress] Swiper と WordPress の連携

今回は、上記の基本的な組み込み方法の設定を変えて、「ゆっくり横方向に動き続ける、スクロール型のスライダーを実装する方法」について書いて行きたいと思います。

↑こういう感じの、自動でゆっくり横方向にスクロールするスライダーについてです。

まずはコードをご紹介

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



14行目~17行目の on: について

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

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

実際に動くサンプル

今回も、実際に動いているサンプルを用意しました。
次のリンクより、確認してみてください。
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',
    'order'  => 'ASC',
    '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 -->

この記事のまとめ

今回は swiper を使い、WordPressの投稿を、
連続して自動で動くスライダーとして表示させる方法についてご紹介しました。

このswiper、他にも様々なオプションがあり、またjQueryに依存していないという点が特徴です。
実際のWeb制作の現場でもやはり、slick と並んで人気の、よく見かけるスライダー系スクリプトですね。

今後も、おもしろそうなオプションをみつけたら swiper に関する記事を更新していく予定です。