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

我的代码中出现错误。脚本必须在下面的代码中，而不是滑块的HTML元素。我不知道。