[Dúvida] meu carrossel nao está rolando

<!-- Lembrando que eu posso criar um @import url (" ") para cada um desses estilos diretamente no style.css -->
<link rel="stylesheet" href="styles/header.css">
<link rel="stylesheet" href="banner.css">

• Categorias
• PROGRAMAÇÃO
• FRONT-END
• INFRAESTRUTURA
• BUSINESS
• DESIGN & UX

</header>

<main>
    <section class="banner">
        <h2 class="banner__titulo">Já sabe por onde começar?</h2>
        <p class="banner__texto">Encontre em nossa estante o que precisa para seu desenvolvimento!</p>
        <input class="banner_serch" type="search" placeholder="Qual será sua próxima leitura?">
    </section>

    <section class="carrossel">
        <h2 class="carrossel__titulo">
            ÚLTIMOS LANÇAMENTOS
        </h2>
        <div class="swiper">
            <!-- Additional required wrapper -->
            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>

            <div class="swiper-wrapper">
              <!-- Slides -->
              <div class="swiper-slide"><img src="assets/imagem 1.svg" alt=""></div>
              <div class="swiper-slide"><img src="assets/imagem 2.svg" alt=""></div>
              <div class="swiper-slide"><img src="assets/imagem 3.svg" alt=""></div>
              <div class="swiper-slide"><img src="assets/imagem 4.svg" alt=""></div>
              <div class="swiper-slide"><img src="assets/imagem 5.svg" alt=""></div>
              ...
            </div>
            
          
            <!-- If we need navigation buttons -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
          
          
    </section>
</main>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>  

<script>
const swiper = new Swiper('.swiper', {
    spaceBetween: 10,
    slidesPerView: 3,
    pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
     },
  });
  </script>

  <!-- 
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script>
    const swiper = new Swiper('.swiper', {
        spaceBetween: 10,
        slidesPerView: 3,
        pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
        },
    });
</script>
   -->
   

CSS .carrossel__titulo{ color: var(--laranja); background-color: var(--branco); font-size: 18px; font-weight: 700; text-align: center; padding: 1em 0 0.5em 0; }

.swiper-slide img { width: 100%; }

.swiper-button-prev, .swiper-button-next{ display: none; } .swiper-pagination { position: initial; margin: .5em 0; }