viteでnpm i したswiperが動かない?!

viteでnpm i したswiperが動かない?!

viteでvanilla.jsでの開発時に起こった困ったことを書きます。

あるスライダーにautoPlayを追加したい時に起こったことなのですが、挙動としてpaginationとautoplayを実装しようとした時swiperのGetting StartedにPaginationの追加の仕方が書いてありコードを追加し、autoplayを追加しようとした時にこういう記事や公式APIをみても下記のようなコードが書いてありましたがautoplayは動作せず困っていました。

該当コード

import Swiper, {Pagination} from 'swiper';

const mySwiper = new Swiper('.mySwiper', {
  spaceBetween: 30,
  modules: [Pagination],
  autoplay: {
    delay: 3000,
    disableOnInteraction: true
  },
  pagination: {
    el: '.my-swiper-pagination',
    clickable: false
  }
});

調べた結果このような改善コードになりました。

改善コード

import Swiper, {Pagination, Autoplay} from 'swiper';

const mySwiper = new Swiper('.mySwiper', {
  spaceBetween: 30,
  modules: [Pagination],
  autoplay: {
    delay: 3000,
    disableOnInteraction: true
  },
  pagination: {
    el: '.my-swiper-pagination',
    clickable: false
  }
});

参考記事によるとAutoplayがモジュール化されていうようなのでimportすると解決いたしました。
ドキュメントに書いとけよ！と思ったのですが、優秀エンジニアはsiwper.d.tsに飛んで簡単に解決したんでしょうね。。。。。
こちらその他のオプションです。ご参考に....

declare const A11y: SwiperModule;
declare const Autoplay: SwiperModule;
declare const Controller: SwiperModule;
declare const EffectCoverflow: SwiperModule;
declare const EffectCube: SwiperModule;
declare const EffectFade: SwiperModule;
declare const EffectFlip: SwiperModule;
declare const EffectCreative: SwiperModule;
declare const EffectCards: SwiperModule;
declare const HashNavigation: SwiperModule;
declare const History: SwiperModule;
declare const Keyboard: SwiperModule;
declare const Lazy: SwiperModule;
declare const Mousewheel: SwiperModule;
declare const Navigation: SwiperModule;
declare const Pagination: SwiperModule;
declare const Parallax: SwiperModule;
declare const Scrollbar: SwiperModule;
declare const Thumbs: SwiperModule;
declare const Virtual: SwiperModule;
declare const Zoom: SwiperModule;
declare const FreeMode: SwiperModule;
declare const Grid: SwiperModule;
declare const Manipulation: SwiperModule;