Bootstrap5のCarouselが初期表示時にスワイプを検知しない

画像の切り替えを行うため、Bootstrap5のCarousel（カルーセル）を使っていたのですが、画面が表示されたあとに画像をスワイプしても切り替わらない症状が発生しました。画像切り替えのボタンを一回クリックすると、そのあとはスワイプを検知してくれるようになります。

おそらく画面がロードされる前にCarouselの組み込みが行われているのではと思いまして、画面がロードされた後にカルーセルを組み込むようにしてみました。Vue.jsのOptions APIのコードですが、次のようにmoutedで該当の処理を行っています。

import { createApp } from "vue";
import * as bootstrap from "bootstrap";

const app = createApp({
    mounted: function () {
        let carousel = new bootstrap.Carousel(".carousel");
    },
});

app.mount("#app");

この処理により、初期表示からスワイプを検知してくれるようになりました。
多分、もっとよい方法はあると思うのですが、ご存じの方はご教授ください m(_ _)m

Tweet