2022/04/19

Swiperをnpmで読み込んで使う時の備忘録

Swiperをnpmで読み込んで使う機会があったのでメモ。
import Swiper from 'swiper';だけだとSwiper本体しか読み込まないので、使いたいモジュールも一緒に読み込む必要がある。

動かない例

//Swiper本体のみ
import Swiper from 'swiper';

// Swiper本体とモジュールのスタイル読み込み
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

const Slideshow = () => {

  //これだとpaginationとかが使えない
  const option = {
    loop:true,
    slidesPerView: 1,
    speed:1000,
    autoplay: {
      delay: 5000,
    },
    pagination: {
      el: '.swiper-pagination',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  }

  const swiper = new Swiper('.swiper', option);
}
export default Slideshow;

オッケーな例

//Swiper本体とモジュールを読み込む
import Swiper, { Navigation, Pagination, Autoplay } from 'swiper';

// Swiper本体とモジュールのスタイル読み込み
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

const Slideshow = () => {

  const option = {
    //モジュールを使う
    modules: [Navigation, Pagination, Autoplay],
    loop: true,
    slidesPerView: 1,
    speed: 1000,
    //autoplayとかpaginationとかが使えるようになる
    autoplay: {
      delay: 5000,
    },
    pagination: {
      el: '.swiper-pagination',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  }

  const swiper = new Swiper('.swiper', option);
}
export default Slideshow;