swiperで実装したスライドで、アクティブなスライドが中央配置されない

Question

前提・実現したいこと

スマホで、swiperを使ってループするスライドを実装しています。
アクティブなスライドが常に中央に配置されるように実装したいです。

発生している問題・エラーメッセージ

発生している問題は、
centeredSlides を trueにしているのに、アクティブなスライドが中央配置されません。

該当のソースコード

let swiper = new Swiper('.swiper-container', {

  centeredSlides: true,
  loop: true,
  slidesPerView: "auto",
  loopedSlides: 4,
  spaceBetween: 10,
  height: 200,
  width: 200,

});

試したこと

オプションに
centeredSlidesBounds: true,
を付与してみましたが、ダメでした。

どなたか、アドバイスを頂けないでしょうか。

Answer 1

jsで指定するオプションを変えたら、いけた

let swiper = new Swiper('.swiper-container', {
  slidesPerView: 'auto',
  centeredSlides: true,
  spaceBetween: 10,
  loop: true,
});

ここに、height や width を付けたら、中央揃えになりませんでした

また、大変申し訳ありませんが、こちらの詳しい仕様は理解できていません！

もし何かわかった場合、こちらの自己解決に追記します。