Swiper.jsを使っておしゃれにカルーセル導入はいかが？

はじめに

• フロントのデザインでよく横に画像がスライドするデザイン(カルーセルやスライダーといわれるアレです。)があります。
• 今回はそのカルーセルを簡単に取り入れられるJavascriptのライブラリSwiper.jsについてと実際に試してみたという内容になります。

Swiper.js

• Swiper.jsというのは、カルーセルが作れるJavaScriptライブラリになります。
• 　ちなみにカルーセルというのは、こんなやつですね。

• Swiper.jsでは、それぞれのライブラリ、フレームワークごとに導入方法が公式で用意されているので使いやすさという点も非常に良い印象を持っています。

  • React
  • Svelte
  • Vue
  • Angular

• また、カルーセル自体のデザインも色々用意されており単純なものやちょっとこだわったデザインもあったりします。

実際に試してみた

• 今回はreactのアプリにSwiper.jsを組み込んで様々なカルーセルのデザインを試していこうと思います。

導入

• npmを利用している場合は、下記のコマンドでインストールすることができます。

npm install swiper

• 使用方法は単純で必要なものをimportしていきます。
• デフォルトの構成は下記のような形で、Swiperのコアの部分、css、そしてSwiperのインスタンスを作成していきます。

// import Swiper JS
import Swiper from 'swiper';

// import Swiper styles
import 'swiper/css';

const swiper = new Swiper(...);

• ここから拡張で、たとえば、ナビゲーションやページネーションが欲しい場合は、それらをimportしていきます。

// core version + navigation, pagination modules:
import Swiper, { Navigation, Pagination } from 'swiper';
  
// import Swiper and modules styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

// init Swiper:
const swiper = new Swiper('.swiper', {
    // configure Swiper to use modules
    modules: [Navigation, Pagination],
 ...
});

• 上記でSwiperのインスタンスを作成すると書いたのですが、最後にSwiperの諸々の設定を含め初期化する必要があります。(下記は一例)

const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

様々なパターンを実装し試してみる

default

• まずはデフォルトのswiperを試します。
• 下記の例は、画像をクリックしながら横にスライドすると画面が切り替わるようなデザインになっています。

import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import SwiperCore, {
  Navigation,
  Pagination,
  Autoplay,
  Virtual
} from "swiper/core";
import 'swiper/css/bundle';
import "./styles.css";

SwiperCore.use([Navigation, Pagination, Autoplay, Virtual]);

export default function App() {
  const slides = [];

  for (let i = 0; i < 12; i++) {
    slides.push(
      <SwiperSlide key={`slide-${i}`} style={{ listStyle: "none" }}>
        <div className="slide">
          <h3>{i}</h3>
        </div>
      </SwiperSlide>
    );
  }

  return (
    <Swiper
      id="swiper"
      virtual
      slidesPerView={3}
      spaceBetween={30}
      onReachEnd={() => {
        const tmp = slides.unshift();
        slides.push(tmp);
      }}
    >
      {slides}
    </Swiper>
  );
}

Navigation

• 次はNavigationの機能を有効にしたものです。
• 下記のように画像の端に矢印が表紙されました。これをクリックすると画像の表示が切り替わるようになります。

import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import SwiperCore, {
  Navigation,
  Pagination,
  Autoplay,
  Virtual
} from "swiper/core";
import 'swiper/css/bundle';
import "./styles.css";

SwiperCore.use([Navigation, Pagination, Autoplay, Virtual]);

export default function App() {
  const slides = [];

  for (let i = 0; i < 12; i++) {
    slides.push(
      <SwiperSlide key={`slide-${i}`} style={{ listStyle: "none" }}>
        <div className="slide">
          <h3>{i}</h3>
        </div>
      </SwiperSlide>
    );
  }

  return (
    <Swiper
      id="swiper"
      virtual
      slidesPerView={3}
      spaceBetween={30}
      onReachEnd={() => {
        const tmp = slides.unshift();
        slides.push(tmp);
      }}
      navigation
    >
      {slides}
    </Swiper>
  );
}

Pagination

• 続いてはPaginationの機能を有効にしたものです。
• Paginationを有効にすると、下記のように中央の画像下に今表示されている画像群のどこというのが可視化されます。

import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import SwiperCore, {
  Navigation,
  Pagination,
  Autoplay,
  Virtual
} from "swiper/core";
import 'swiper/css/bundle';
import "./styles.css";

SwiperCore.use([Navigation, Pagination, Autoplay, Virtual]);

export default function App() {
  const slides = [];

  for (let i = 0; i < 12; i++) {
    slides.push(
      <SwiperSlide key={`slide-${i}`} style={{ listStyle: "none" }}>
        <div className="slide">
          <h3>{i}</h3>
        </div>
      </SwiperSlide>
    );
  }

  return (
    <Swiper
      id="swiper"
      virtual
      slidesPerView={3}
      spaceBetween={30}
      onReachEnd={() => {
        const tmp = slides.unshift();
        slides.push(tmp);
      }}
      pagination
    >
      {slides}
    </Swiper>
  );
}

このNavigation　と Paginationは併用できるので、二つとも有効化しておくとよく見るカルーセルのデザインに近づきますね。

Pagination progress

• Pagination progressというのは、下記の画像のようにスライドしていくとプログレスバーのステータスが埋まっていくようなデザインを指します。
• なかなか見ないデザインですがこれはこれで面白いですね。

Pagination fraction

• Pagination fractionという機能は、ページネーションではあるのですが、現在何番目の画像群というのを可視化させる機能になっています。

import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import SwiperCore, {
  Navigation,
  Pagination,
  Autoplay,
  Virtual
} from "swiper/core";
import 'swiper/css/bundle';
import "./styles.css";

SwiperCore.use([Navigation, Pagination, Autoplay, Virtual]);

export default function App() {
  const slides = [];

  for (let i = 0; i < 12; i++) {
    slides.push(
      <SwiperSlide key={`slide-${i}`} style={{ listStyle: "none" }}>
        <div className="slide">
          <h3>{i}</h3>
        </div>
      </SwiperSlide>
    );
  }

  return (
    <Swiper
      id="swiper"
      virtual
      slidesPerView={3}
      spaceBetween={30}
      onReachEnd={() => {
        const tmp = slides.unshift();
        slides.push(tmp);
      }}
      pagination={{
        type: "fraction",
      }}
    >
      {slides}
    </Swiper>
  );
}

その他のオプション

• その他のオプションとしては、autoplayという機能なんかもあります。これを追加すると自動で画像群のスワイプがされるようにあります。

    <Swiper
      id="swiper"
      virtual
      slidesPerView={3}
      spaceBetween={30}
      autoplay
      onReachEnd={() => {
        const tmp = slides.unshift();
        slides.push(tmp);
      }}
      pagination={{
        type: "fraction",
      }}
    >
      {slides}
    </Swiper>

まとめ

• 今回紹介した機能以外にも多くの機能がSwiper.jsにはあります。
• 用途ごとに使用する機能を追加し使用することをオススメします。
• 最後まで読んでいただきありがとうございました。

参考