Swiperの複数スライド表示と自動再生がすぐに作動しない（ウィンドウサイズを変更＋swiper-buttonをクリックで作動する）

前提・実現したいこと

こんにちは。
独学の初心者なのですが、下記サイトを参考にSwiperのカルーセルを作成しています。
https://garigaricode.com/swiper/

現在EktronというCMSを使用したウェブページの更新作業をしていて、アクセス権限の都合上、jsもcssもすべてひとつのhtmlファイルに記述しています。

【やろうとしていること】
参考サイトの下記の設定をしています。
「13.自動で動かす」
「14.一度に複数のスライドを表示する」
「20.画面幅によってレイアウトを変える」

【PCの現状】
リロードした段階では、参考サイトの「3.基本の要素」のような状態で表示され、swiper-buttonも反応しません。
でも、ウィンドウのサイズを変更するとすると、slidesPerViewとbreakpointsが作動し、その段階でswiper-buttonをクリックするとautoplayが作動を始めます。

【SPの現状】
リロードしてすぐは、何も作動しませんが、しばらくすると全て作動を始めます。

記述の順番に問題があるのでしょうか？
本当に初心者のため、どんなことでもお教えいただけると幸いです。
どなたかご回答のほど、よろしくお願いいたします。

【11/9追記】
こちらの質問とかなり現象が似ているので、同様の問題があるのではないかと考えています。
https://teratail.com/questions/177716
私の作成中のページでも同様にデベロッパーツール表示中は問題なく作動しています。

該当のソースコード

<link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"  ></script>
<style>
/* 全体のスタイル */
.swiper-wrapper {
  width: 100%;
  height: 250px;
}
/* 全スライド共通スタイル */
.swiper-slide {
  color: #ffffff;
  height: 100%;
  text-align: center;
  line-height: 250px;
}
/* スライドのスタイル */
.swiper-slide:nth-child(4n+1) {
  background-color: #EECB27;
}
.swiper-slide:nth-child(4n+2) {
  background-color: #E13239;
}
.swiper-slide:nth-child(4n+3) {
  background-color: #1F1762;
}
.swiper-slide:nth-child(4n+4) {
  background-color: #BEDAE5;
}
</style>

<div class="swiper-container">                                  
<!-- メイン表示部分 -->                   
<div class="swiper-wrapper">           
<!-- 各スライド -->                               
<div class="swiper-slide">Slide 1</div>       
<div class="swiper-slide">Slide 2</div>       
<div class="swiper-slide">Slide 3</div>       
<div class="swiper-slide">Slide 4</div>         
<div class="swiper-slide">Slide 5</div>         
<div class="swiper-slide">Slide 6</div>         
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
<div class="swiper-slide">Slide 11</div>
<div class="swiper-slide">Slide 12</div> 
</div>             
<div class="swiper-button-prev"></div>         
<div class="swiper-button-next"></div>         
<div class="swiper-pagination"></div>
</div>
<script type="text/javascript">
    var mySwiper = new Swiper('.swiper-container', {
    slidesPerView: 3,
    breakpoints: {
    768: {
      slidesPerView: 2,
    },
    480: {
      slidesPerView: 1,
    }
  },
    autoplay: {
  delay: 3000,
  stopOnLastSlide: false,
  disableOnInteraction: false,
  reverseDirection: false
  },
    navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  },
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true
  }
});
</script>

m.ts10806

2020/11/06 05:10

Swiperのオプション通りに動いているように思いますが（ドキュメント参照）、結局どのようにしたいのでしょうか。

Reeen

2020/11/06 06:02

さっそくのご回答ありがとうございます！！！ページを開いた段階（リロードした段階）ですぐに全てが作動するように修正したいです。 PC・SPそれぞれ、ウィンドウサイズを変えるなどすれば思うように作動するのですが、何もしなくてもすぐ作動させたいです。現状のコードには問題がないのでしょうか？CMSや他のページの設定のバッティングのために不具合が起きているのでしょうか？