[Swiper]タブレットやスマホで見た時にSwiperで表示するスライド数を変える方法[WordPress]

swiper関連の記事_タブレットやスマホで見た時にSwiperで表示するスライド数を変える方法

当サイトでは何度かSwiperをWordPressに組み込む方法をご紹介していますが、
該当記事: [WordPress] Swiper と WordPress の連携

swiper を使って、いい感じにスライダーを実装できたと思っていたのも束の間、

「これ、iPadだとせますぎない?」
「スマホだと小さすぎてぜんぜん良くない。枚数減らせないの?」

…というオーダーを受けることは、Web制作の現場でよくあるケースですよね。

そこで今回は、上記の基本的な組み込み方法をベースに、
そこにブレイクポイントを設定して
「デバイスごとに表示するスライド数を変える」
という部分について書いていきたいと思います。

まずはコードをご紹介

const mySwiper = new Swiper('.swiper-container', {
  direction: 'horizontal',
  loop: true,
  slidesPerView: 3,
  breakpoints: {
    320: {
      slidesPerView: 1,
      spaceBetween: 0,
    },
    768: {
      slidesPerView: 2,
      spaceBetween: 0,
    },
    769: {
      slidesPerView: 3,
      spaceBetween: 0,
    },
  },
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

swiperを使用するための基本的なファイル構成は、冒頭にも書いたように、次のリンク先の
記事に書いてある内容のとおりです。

該当記事:[WordPress] Swiper と WordPress の連携
↑この記事の中にあるファイル構成の、swiperの設定を記述してあるファイル(上記記事の例だと swiper-setting.js )を編集する形になります。

では各行について、見ていきます。
1行目は、swiperと紐づける要素を指定。ここでは swiper-container がそれに該当します。
2行目〜3行目は、direction: ‘horizontal’,(水平方向に並べる)、
loop: true,(ループさせる)、
特に難しい設定ではなく、だいたいはこの設定にする事が多いと思います。
4行目は、 slidesPerView: 3, として、デフォルトの表示枚数を指定。
そして
5行目〜18行目、この breakpoints: の設定が、
今回もっとも書きたかった内容になります。

その名の通り、breakpoints で各種デバイスの横幅ごとの表示枚数を設定できます

こちらの breakpoints: という設定、
見ればどんな挙動をするのかだいたいお分かりかと思いますが、

6, 10, 14行目に入っている数字が、
各種画面サイズを表しています。

320、というのは割とレガシィな、iPhone 6 より前の時代の頃の、縦持ちした時のディスプレイサイズですね。
もはや現在(2021時点)の制作現場では、このサイズを拾わなくても良いような風潮も
場合によりあるにはありますが、このサイズの端末を使っているユーザーが
全くいないというわけでもないので、今回はこの値としています。

768 というのは iPad の縦持ちした時のサイズ、
そして
769 はそれ以上のディスプレイサイズの場合

を設定しています。
slidesPerView が表示する枚数、
spaceBetween がそれぞれのスライドの間隔
になります。

これで、端末ごとに
swiper で表示するスライド枚数を、
柔軟に設定できるというわけです。

以降の pagination の設定、
navigation の設定で
それぞれページネーションを表示させる要素、
次へ、戻るに紐づく要素
を設定しています。

実際に動くサンプル

今回も、実際に動いているサンプルを用意しました。次のリンクより、確認してみてください。
各種スマートフォンやiPad実機、またはChromeのエミュレーター等で見てもらうと、
設定したbreakpointsが有効になっている事がわかるかと思います。

swiperのbreakpointsのサンプル

WordPressのテンプレートで使用するには

html側は、以下コードの様に、例えばこんな感じで用意しておきます(WordPressのテンプレートを想定しています)。
この部分は、swiper関連の記事では毎回ほぼ触れているので、今回も詳しい説明は省略します。
WordPressからどうやって記事を取得すれば良いか等の詳しい説明は、以前の記事( [WordPress] Swiper と WordPress の連携 ) を参照してください。

<?php
  $slideargs = array(
    'post_type' => 'post',
    'post_status' => 'publish',
    'orderby'  => 'rand',
    'posts_per_page' => 8
    );
  $the_query = new WP_Query($slideargs);
?>
<div class="swiper-container">
  <div 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>
        </a>
      </div><!-- pair of m-slider-desc -->
    </div><!-- pair of swiper-slide, m-slider-child -->
    <!-- // Slides -->
    <?php endwhile; endif; ?>
  </div><!-- pair of swiper-wrapper -->
  <div class="swiper-pagination"></div>
</div><!-- pair of swiper-container -->
<!-- prev, next -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<?php wp_reset_postdata(); ?>

この記事のまとめ

冒頭に書いた通り、
swiper を使って、いい感じにスライダーを実装できたと思っていたのも束の間。
「これの枚数を、端末ごとに変えてほしいです」
というオーダーを受けることは、Web制作の現場でよくあることだと思います。

私もはじめは
css側で複雑にブレイクポイントの設定しないといけないのかね?
あ、でもその場合、swiperの表示エリアって動くでしょ?
そこにはちゃんと適用されるものなのかね?

…などと思案したものですが、全然心配する必要なく
実は初めから、swiper側で
その機能が備わっていました。

そんな breakpoints という swiper の設定について、今回はご紹介しました。

swiper はとにかく、jQueryに依存していないという点で
モダンなUIフレームワークを使っているような案件でもシンプルに組み込む事ができ、
便利なスライダー系スクリプトです。

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

※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。