Swiper JS 轮播在 Joomla + Bootstrap 5 中无法进行分页和导航

Question

首先尝试使用Swiper JS。我从 CDN 连接它。在我的 Joomla 4 模板中使用它，此模板使用 Twitter Bootstrap 5.

这是link：https://club.artcolorit.com/ 我需要创建相同的，就像在 Figma 布局中一样：Screenshot

一些问题：

我看到了导航，但没有用。
我没有看到分页
它需要在屏幕上显示 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

我的代码有错误。脚本必须在代码下方而非滑块的 HTML 元素中。我不知道。

Swiper JS 轮播在 Joomla + Bootstrap 5 中无法进行分页和导航

Swiper JS carousel not working pagination and navigation in Joomla + Bootstrap 5

javascript

joomla

carousel

swiper

bootstrap-5