Swiper JS 輪播在 Joomla + Bootstrap 5 中無法工作分頁和導航

Question

首先嘗試使用 Swiper JS。 我是從 CDN 連接的。 在我的 Joomla 4 模板中使用它，這個模板使用 Twitter Bootstrap 5。

這是鏈接： https://club.artcolorit.com/我需要創建相同的，就像在 Figma 布局中一樣：截圖

一些問題：

1. 我看到導航，但它沒有工作。
2. 沒看到分頁
3. 它需要在屏幕上顯示 3 張幻燈片，但我只看到一張。

Javascript

<script>
      let swiper = new Swiper(".swiper", {
        slidesPerView: 3,
        spaceBetween: 30,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          renderBullet: function (index, className) {
            return '<span class="' + className + '">' + (index + 1) + "</span>";
          },
        },
        navigation: {
           nextEl: '.swiper-button-next',
           prevEl: '.swiper-button-prev',
        },
      });
    </script>

HTML

<div id="games" class="row">
<div class="col-12">
<h2 class="zag-h2">Наши игры</h2>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1<img src="images/game.jpg" alt="" /></div>
<div class="swiper-slide">Slide 2<img src="images/game.jpg" alt="" /></div>
<div class="swiper-slide">Slide 3<img src="images/game.jpg" alt="" /></div>
</div>
<div class="swiper-pagination"> </div>
<div class="swiper-button-prev"> </div>
<div class="swiper-button-next"> </div>
</div>
</div>
</div>

請幫助解決這些問題。 謝謝

Answer 1

錯誤在我的代碼中。 腳本必須在下面的代碼中，而不是 slider 的 HTML 元素。 我不知道。