Swiper.jsとBootstrapでレイアウトが崩れた時の話

Bootstrapのrowとcolを使ったレイアウトの中でSwiper.jsを使おうとしたら、幅がおかしくなった。

現象

rowの中にcolを３つ入れて、横並びレイアウトをしていて、そのcolの中にSwiper.jsを入れたら、そのcolが横幅いっぱいに広がってしまった。

原因

flex関連の干渉が原因？

解決方法

以下のように、swiper-wrapperのpositionをabsoluteにする。

.swiper-container {
    width: 100%;
    height: 200px;
}
.swiper-wrapper {
    position: absolute;
    top: 0;
    left: 0;
}