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

Question

At first try to use Swiper JS. I'd connected it from CDN. Using it in my Joomla 4 template, this template using Twitter Bootstrap 5.

This is link: https://club.artcolorit.com/ I need create the same, like in Figma layout: Screenshot

Some problems:

1. I see navigation, but it didn't working.
2. I didn't see pagination
3. It need display 3 slide on the screen, but I see only one.

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>

Help please with these problems. Thanks

Answer 1

Error was in my code. Script must be in the code below than HTML-elements of the slider. I didn't know about it.