Swiper.jsで上下左右中央揃えを実現する

結論

以下のCSSをSwiper.jsのCSSの後に適用する

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

classに適用するだけじゃだめ

私の環境では、swiper/reactとTailwindCSSを使ってたんですが、swiper.jsはSwiperSlideに対してデフォルトでflexboxを適用しています。

そのため、SwiperSlideに対してclassを用いてflex items-center justify-centerを適用するだけでは、デフォルトのSwiper.jsのCSSで上書きされてしまいます。

それを回避するためには、以下のようにCSSを作成し

swiperCustom.css

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

swiper/cssの後にimportしてあげる必要があります

SwiperComponent.tsx

import { Pagination, Navigation, Autoplay } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import '@/styles/swiperCustom.css';

これで、SwiperSlide内の要素を上下中央揃えすることができます。