Al principio intente usar Swiper JS. Lo había conectado desde CDN. Al usarlo en mi plantilla de Joomla 4, esta plantilla usa Twitter Bootstrap 5.

Este es el enlace: https://club.artcolorit.com/ Necesito crear lo mismo, como en el diseño de Figma: Captura de pantalla

Algunos problemas:

1. Veo navegación, pero no funciona.
2. no vi la paginacion
3. Necesita mostrar 3 diapositivas en la pantalla, pero solo veo una.

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>

Ayuda por favor con estos problemas. Gracias