[2021年]Swiper V6で思い通りに動かなかった場合

SwiperのV6系を導入したあと、動くには動くが左右のボタンがnext,prevのボタンが動かなかったりページャーが出なかったり、
エフェクトが思い通りになってなかったりと思いの外ハマったので記事にする。

公式ドキュメント

インストール

 $ npm install swiper

利用

NGなパターン

  // import Swiper JS
  import Swiper from 'swiper';
  // import Swiper styles
  import 'swiper/swiper-bundle.css';

  const swiper = new Swiper(...);

上記がうまく行かない原因だった。
下の方にあるようにbundleを含むimportをするとうまく動いた。

OKなパターン

  // import Swiper bundle with all modules installed
  import Swiper from 'swiper/bundle';

  // import Swiper styles
  import 'swiper/swiper-bundle.css';
  // init Swiper:
  const swiper = new Swiper(...);

という結末