Initially, I attempted to incorporate Swiper JS into my Joomla 4 template using Twitter Bootstrap 5. I connected it from CDN.
If you visit this link: , you will see the desired layout from a Figma design: Screenshot
However, I encountered some issues:
- Although I have the navigation, it is not functioning.
- The pagination is not visible.
- I specified displaying 3 slides on the screen, but only one is visible.
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">Our Games</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>
Any assistance with these issues would be greatly appreciated. Thank you.