【Next.js】作成済みのコンポーネントにSwiperを導入する

今回は、当ブログのアップデートで導入したSwiperについてです。以下の記事であったように前回はページネーション機能を投稿一覧等に導入しました。

よりインタラクティブな操作を実現するためにスワイプ操作でもページがめくれるように変更します。

クエリパラメータ連携をON/OFF可能な...なぜ必要？ レンダリング的に...https://blog.isirmt.com/post/nextjs-...

• デザインは従来のまま

せっかくあるデザインはそのままな実装を目標にします。

環境導入

まずはインストールします。当時は(v11.1.14)。

pnpm i swiper

対象のファイルでインポートします。

import { Swiper, SwiperClass, SwiperSlide } from 'swiper/react';
import 'swiper/css';

Swiperのインポート時に補完でfrom 'swiper'も出てきますが、'swiper/react'なので注意。

スライド作成

元々は配列をスライスしてフックで作った状態変数をもとに範囲指定していました。今回は、その範囲ごとにスライド化するのでArray.fromで複数スライドを作成します。

Array.from({ length: maxPage }, (_, i) => {
  const startIndex = i * postsPerPage;
  const displayingPosts = posts.slice(startIndex, startIndex + postsPerPage);

  return <SwiperSlide />
}

ループ毎にこのようにすれば問題ないでしょう。この<SwiperSlide />内では従来の配列表示のコンポーネントをそのままコピペしましょう。

Swiperのラッパー部分

メインのラッパー部分です。この範囲内の要素をスライドすることでページをめくることができるのでプロパティを適切に設定します。

<Swiper
  autoHeight
  spaceBetween={50}
  slidesPerView={1}
  onSwiper={setSwiperInstance}
  onSlideChange={(swiper) => {
    const newPage = swiper.activeIndex + 1;
    setPage(newPage);
    if (useRouting) updatePage(newPage);
  }}
  initialSlide={page - 1}
>
  {/* 先ほどのループ */}
</Swiper>

• autoHeight: コンテンツの高さが変動した際に自動調整されます。falseの場合は、常にどこかのページの最大の高さで揃えられます。
• A11y: アクセシビリティ
• spaceBetween={50}: スライド間の隙間
• slidesPerView={1}: 表示あたりのスライドの表示量 (少数なら見切れるように表示される...?)
• onSwiper: インスタンスを渡す
• onSlideChange: ページ切り替え時に動作する。既にあるナビゲーションと連動ができる。
• initialSlide: 表示する最初のページ番号

これだけで表示は従来のままSwiperの実装が完了しました。

切り替えボタンとの連携

スワイプすることでナビゲーションの情報も変更することができるようになりました。ただ、ナビゲーションからはまだ変えることができません。

そこで、先ほどのインスタンスを使います。インスタンスはコンポーネント内で状態変数として登録しておきます。

const [swiperInstance, setSwiperInstance] = useState<SwiperClass | null>(null);

「前のページ」ボタンのコードは次のようになります。

omClick={() => {
  const nextPage = page - 1 <= 0 ? maxPage : page - 1;
  if (useRouting) updatePage(nextPage); // 元から(クエリパラメータ)
  setPage(nextPage); // 元から
  swiperInstance?.slideTo(nextPage - 1); // nextPageは1から進むため
}}

インスタンスからslideToを呼ぶだけなので気軽に導入できました！

Swiper - The Most Mo...Swiper is the m...https://swiperjs.com/