React で Swiper を使うため、react-id-swiper を利用したが動かない

react-id-swiper@4.0.0 を利用したときに、不具合があったり、使いづらかったりした点がありました。

スタイルが反映されない

swiper@6.8.4 であれば以下のように書けば、スタイルが反映されますが、 swiper@7.0.6 では、

@import "swiper/swiper-bundle.css";

のような styleの読み込みがエラーになります。
そもそもバージョンにかかわらず、style は、グローバルに読み込むしか方法がなく、styled-components や、CSS modules を利用することができないのは不便です。

pagination、navigation などが機能しない

pagination、navigation を利用する場合は、option に指定するだけでは機能せず、以下のように設定しなければ動かない。

import { Pagination, Navigation, Swiper } from "swiper";
Swiper.use([ Pagination, Navigation ])

しばらく更新もないので、今後も修正されない可能性がありそうです。