[Bug] Carrossel não está funcionando | HTML e CSS: responsividade com mobile-first

O meu carrossel não está funcionando

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AluraBooks</title>
    <link rel="stylesheet" href="reset.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"
    />

    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header class="cabecalho">
      <div class="container">
        <input type="checkbox" id="menu" class="container__botao" />
        <label for="menu">
          <span class="cabecalho__menu-hamburguer container__imagem"></span>
        </label>
        <ul class="lista-menu">
          <li class="lista-menu__titulo">Categorias</li>
          <li class="lista-menu__item">
            <a href="#" class="lista-menu__link">Programação</a>
          </li>
          <li class="lista-menu__item">
            <a href="#" class="lista-menu__link">Front-end</a>
          </li>
          <li class="lista-menu__item">
            <a href="#" class="lista-menu__link">Infraestrutura</a>
          </li>
          <li class="lista-menu__item">
            <a href="#" class="lista-menu__link">Business</a>
          </li>
          <li class="lista-menu__item">
            <a href="#" class="lista-menu__link">Design & UX</a>
          </li>
        </ul>
        <img
          src="img/Logo.svg"
          alt="Logo da Alurabooks"
          class="container__imagem"
        />
      </div>
      <div class="container">
        <a href="#"
          ><img
            src="img/Favoritos.svg"
            alt="Meus favoritos"
            class="container__imagem"
        /></a>
        <a href="#"
          ><img
            src="img/Compras.svg"
            alt="Carrinho de compra"
            class="container__imagem"
        /></a>
        <a href="#"
          ><img
            src="img/Usuario.svg"
            alt="Meu perfil"
            class="container__imagem"
        /></a>
      </div>
    </header>
    <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
        type="search"
        class="banner__pesquisa"
        placeholder="Qual será sua próxima leitura?"
      />
    </section>
    <section class="carrossel">
      <h2 class="carrossel__titulo">Últimos lançamentos</h2>
      <!-- Slider main container -->
      <div class="swiper">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
          <!-- Slides -->
          <div class="swiper-slide">
            <img
              src="img/ApacheKafka.svg"
              alt="Livro sobre apache kafta e spring da alura books"
            />
          </div>
          <div class="swiper-slide">
            <img
              src="img/Liderança.svg"
              alt="LIvro sobre liderança em design da alura books"
            />
          </div>
          <div class="swiper-slide">
            <img
              src="img/Javascript.svg"
              alt="Livro sobre javascript assertivo da alura books"
            />
          </div>
          <div class="swiper-slide">
            <img
              src="img/Guia Front-end.svg"
              alt="Livro sobre guia front-end da alura books"
            />
          </div>
          <div class="swiper-slide">
            <img
              src="img/Portugol.svg"
              alt="Livro sobre portugol da alura books"
            />
          </div>
          <div class="swiper-slide">
            <img
              src="img/Acessibilidade.svg"
              alt="Livro sobre acessibilidade da alura books"
            />
          </div>
        </div>
        <!-- If we need pagination -->
        <div class="swiper-pagination"></div>

        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- If we need scrollbar -->
        <div class="swiper-scrollbar"></div>
      </div>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
    <script>
      const swiper = new Swiper(".swiper", {
        spaceBetween: 10,
        slidesPerView: 3,
      });
    </script>
  </body>
</html>

Eu clico na setinha do lado mas nada continua nas três imagens

Olá Daniel, tudo bem?

para fazer com que as setinhas sejam funcionais você deve dar "vida" através da propriedade navigation que define os elementos HTML que representam os botões de navegação para a esquerda e para a direita (.swiper-button-prev e .swiper-button-next, respectivamente). Quando clicados, esses botões permitem que o usuário navegue pelas imagens do carrossel.

Seu código, com essa nova implementação, fica assim:

<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: 'fraction',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
</script>

Espero ter ajudado, mas caso tenha alguma dúvida me coloco à disposição

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!