📱

【React】モバイルタッチスライド「Swiper」ライブラリのすすめ

2022/06/22に公開

JavaScript

こんにちは、@nerusanです。

スマホでネットサーフィンをする際、画像をスワイプし、閲覧するサイトがよくあります。
例えば、ECサイトであるYahooショッピングでは、商品の画像をスワイプできます。

他にも、Amazon Prime　videoでもカルーセルと呼ばれるものが施されていおり、左右にスライド、または、ナビゲーションボタンを押すことでより多くのコンテンツを見ることができます。

これらの表示の実装難しそうと思われるかもしれませんが、今回紹介する「Swiper」と呼ばれるライブラリを利用すれば簡単に実装ができるので紹介します。

https://swiperjs.com/

具体的にどのようなことができるのかは、以下のでもページで紹介されています。

https://swiperjs.com/demos

「カバーフロー」や「カード」のようなエフェクトも用意されているので、ちょっと変わったスライドも簡単に作れて便利です！

こちらは、結構カスタマイズ性も闔閭されており、細かくスタイルを適用できるようになっています。

使ってみよう

では、まずインストールからします。

$ yarn add swiper
$ yarn add -D @types/swiper

例のコードを示します。(デモに書かれているコードほぼそのままです。)

App.tsx

import React from "react";
// Swiperモジュール
import { Swiper, SwiperSlide } from "swiper/react";

// swiperで用意されているデフォルトののスタイル
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

// 自分が用意したcss
import "./styles.css";

// ナビゲーションやページネーションのモジュール
import { Navigation, Pagination } from "swiper";

export default function App() {
  return (
    <>
      <Swiper
        dir="rtl"
        navigation={true}
        pagination={{
          clickable: true,
        }}
        modules={[Navigation, Pagination]}
      >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
        <SwiperSlide>Slide 5</SwiperSlide>
      </Swiper>
    </>
  );
}

style.css

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
    display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

記述はとてもシンプルでわかりやすくDXも良いですね！

これを描画すると以下リンク先のようになります。
https://swiperjs.com/demos#rtl

ぬるぬるスライドができますね！スマホでも触ってみてもぬるぬるです！

自分流のカスタマイズしよう

ナビゲーションボタンや、ページネーションのスタイルは、デフォルト用意されているスタイルになっています。デフォルトでもいい感じですが、自分でカスタマイズしたいものです。

swiperでは、各種要素にclassが当てられているので、そちらを利用することで自分のスタイルにカスタマイズすることができます。

例えば、ナビゲーションバーの次へのボタンは、swiper-button-nextというクラスが与えられています。なので、こちらの高さを変えたい！ってなった場合は、以下のようにすれば良いです。

style.css

.swiper-button-next {
  /* ボタンの高さを100pxにする */
  height: 100px;
}

各種与えられているclass名は、公式サイトを参考にしてください。

上記で出てきたstyle.cssのswiper, swiper-slideに対するスタイル設定もswiperで用意されているclassに対するスタイル設定ってことになります。

また、chromeなどの開発者ツールなどで、class名を検索するのも有効です！

他にも以下のように、左右端にいるとナビゲーションバーは、少し薄くなります。

これも消したいって場合は以下のようにすれば消せtます

style

.swiper-button-disabled {
  /* 左右端の時バビゲーションバーを消す */
  opacity: 0;
}

うまく消えましたね！

まとめ

今回は、Swiperというライブラリを紹介しました。
スマホファーストの今、同じような実装をしたい人は多いと思います。
是非その際はSwiperを検討してみてはいかがでしょうか。

GitHubで編集を提案

使ってみよう

自分流のカスタマイズしよう

まとめ

Discussion