meu carrosel não funciona ;-; | HTML e CSS: responsividade com mobile-first

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AluraBooks</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
    <link rel="stylesheet" href="./styles/styles.css">
</head>
<body>
    <header class="cabecalho">
        <div class="conteiner">
            <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 class="container__imagem" src="./assets/Logo.svg" alt="logo da  alurabooks">            
        </div> 
        <div class="conteiner">
            <a href="#"><img class="container__imagem" src="./assets/Favoritos.svg" alt="Meus favoritos"></a>
            <a href="#"><img class="container__imagem" src="./assets/Compras.svg" alt="Carrinhos de compras"></a>
            <a href="#"><img class="container__imagem" src="./assets/Usuario.svg" alt="Meu perfil"></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">Novos lançamentos</h2>
    </section>
    <div class="swiper">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide"><img src="./assets/ApacheKafka.svg" alt="livro sobre apache kafka e spring boot da alura books"></div>
            <div class="swiper-slide"><img src="./assets/Lideranca.svg" alt="livro sobre Liderança da alura books"></div>
            <div class="swiper-slide"><img src="./assets/Javascript.svg" alt="livro sobre Javascript assertivo da alura books"></div>
            <div class="swiper-slide"><img src="./assets/Guia Front-end.svg" alt="livro sobre Front-end da alura books"></div>
            <div class="swiper-slide"><img src="./assets/Portugol.svg" alt="livro sobre portugol da alura books"></div>
            <div class="swiper-slide"><img src="./assets/Acessibilidade.svg" alt="livro sobre Acessibilidade web 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>

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

    </script>
</body>
</html>

Olá, Thiago, como vai?

O seu carrossel não está funcionando porque há um erro na forma como o script está estruturado. O conteúdo dentro da tag <script> com src é ignorado. Ou seja, o navegador está tentando carregar o Swiper da CDN, mas ignora o código dentro da tag, por isso o carrossel não inicializa.

Para resolver, você pode separar a importação da biblioteca do código de inicialização, assim:

<!-- Importação da biblioteca -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<!-- Inicialização do carrossel -->
<script>
  const swiper = new Swiper('.swiper', {
    spaceBetween: 10,
    slidesPerView: 3,
  });
</script>

Espero ter ajudado.

Siga firme nos seus estudos e conte com o fórum sempre que precisar.

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado