[Dúvida] Carrossel não funciona

Ooie! Os livros no meu projeto ficam um embaixo do outro, alguém consegue me dar um help?

HTML/ JS

• Categorias
• Programação
• Front-end
• Infraestrutura
• Business
• Design & UX

<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 o 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">
        <div class="swiper-pagination"></div>

        <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/Javascript.svg" alt="Livro sobre Javascript assertivo">
        </div>
        <div class="swiper-slide">
            <img src="assets/Portugol.svg" alt="Livro sobre Lógica de Programação com Portugol">
        </div>
        <div class="swiper-slide">
            <img src="assets/UX.svg" alt="Livro sobre UX Estratégico">
        </div>
        <div class="swiper-slide">
            <img src="assets/Gestão2.svg" alt="Livro sobre Gestão de Produtos">
        </div>
        <div class="swiper-slide">
            <img src="assets/Nodejs.svg" alt="Livro sobre Node.js">
        </div>
    </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,
        pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
        },
    });
</script>

CSS

.carrossel__titulo {
    color: var(--laranja);
    background-color: var(--branco);
    text-align: center;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 700;
    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;
}