Swiperで実装したスライダーの矢印が表示されません（テーマDawn)

[arin55]

・矢印（ナビゲーションボタン）とスクロールバーが反映されない

・ページネーションや自動再生は反映されている

・テーマDebutで同じように記述すると矢印（ナビゲーションボタン）とスクロールバーも表示される

Sectionsに新しくliquidファイルを作成して実装しています

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    {%- for block in section.blocks -%}
    <div class="swiper-slide">
      {%- if block.settings.button_link != blank -%}<a href="{{ block.settings.button_link }}">{%- endif -%}<img src="{{ block.settings.image | img_url: "master" }}" />{%- if block.settings.button_link != blank -%}</a>{%- endif -%}
    </div>
    {%- endfor -%}
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>
{{ 'swiper-bundle.min.js' | asset_url | script_tag }}
<script>
  const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'horizontal',
  loop: true,
  effect: 'fade',
  autoplay: {
    delay: 3000,
  　disableOnInteraction: true,
    spaceBetween: 3,
  },

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});
</script>

原因がわかる方がいらっしゃいましたらお手数をおかけしますがご教示いただけますと幸いです。