as outras imagens nao aparece

<section class="carrossel">
  <h2 class="carrossel__titulo">novos 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 kafka e sprinh boot da açura books "></div>
        <div class="swiper-slide"><img src="img/Liderança.svg" alt="livro sobre liderança alura books"></div>
        <div class="swiper-slide"><img src="img/Javascript.svg" alt="livro assertivo da alura books"></div>
        <div class="swiper-slide"><img src="img/Guia Front-end.svg" alt="livro guia front end"></div>
        <div class="swiper-slide"><img src="img/Portugol.svg" alt="livro portugol"></div>
        <div class="swiper-slide"><img src="img/Gestão.svg" alt="livro sobre gestao alura "></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@11/swiper-bundle.min.js"></script>
<script>
  const swiper = new Swiper('.swiper', {
  spaceBetween: 10,
  slidesperview:3,
});
</script>
</body>
</html>