Swiperを利用したスライドで、不具合が発生する原因について

Question

以下、原因を探っているのですが、
アドバイスいただけると幸いです。

実装したのは、
「Swiperを利用したサムネイル画像付きのスライド」です。
挙動はcodepenに掲載しています。

codepen

不具合は、サムネイルをクリックして画像が切り替わる前に、
「1回、再読み込みのような挙動」をすることです。

chromeの開発者ツールで確認したら、
不具合が起こるときは、
以下のエラーが出ていて、ここに原因があるように思いました。

Resource interpreted as Stylesheet but transferred with MIME type text/plain: "https://unpkg.com/swiper/swiper-bundle.min.css".

例えば、上記のcodepenをクリックした際は、
エラーはなく、不具合が発生しません。

しかし、一旦、ブラウザの再読み込みを行うと、
不具合が発生する頻度が多くなります。
このとき、開発者ツールで確認するとエラーがでています。

解決したいことは、
この不具合を解消したいことですが、
なぜエラーが出たり、出なかったりするのか、気になっています。

アドバイスいただけると幸いです。
どうぞよろしくお願い致します。

Answer 1

原因が分からず、
実装方法を変えます。