Olá Shirley! Tudo bem?

Esse desalinhamento pode estar acontecendo por três motivos principais no código:

1. Margem adicionada às imagens do carrossel

   • No seu código, temos:

     .swiper-slide img {
         margin: 2em 0;
     }
     

   • Essa margem de 2em 0 adiciona um espaço acima e abaixo de cada imagem, criando separações indesejadas entre os livros.

2. Uso de display: flex no .swiper

   • Você adicionou:

     .swiper {
         display: flex;
         position: relative;
     }
     

   • O Swiper já tem uma estrutura interna que gerencia os slides. O display: flex pode estar interferindo no comportamento esperado, fazendo com que os slides não se comportem como deveriam.

3. Ajustes na paginação

   • No código original, a paginação (.swiper-pagination) não tem um position: initial;, mas no seu código, essa propriedade pode estar alterando o posicionamento e afetando o layout:

     .swiper-pagination {
         position: initial;
         top: 0;
         left: 50%;
         transform: translateX(-50%);
         z-index: 10;
         width: 100%;
         display: flex;
         justify-content: center;
         padding-top: 1em;
     }
     

   • position: initial; pode estar removendo a posição correta da paginação dentro do Swiper.

Solução

1. Remova ou reduza a margem das imagens para evitar espaços indesejados:

   .swiper-slide img {
       margin: 0;
       width: 100%; /* Garante que as imagens ocupem todo o espaço disponível */
   }
   

2. Remova display: flex do .swiper para evitar que ele interfira na organização dos slides:

   .swiper {
       position: relative;
   }
   

3. Ajuste a paginação para que ela fique no local correto:

   .swiper-pagination {
       left: 50%;
       transform: translateX(-50%);
       z-index: 10;
       width: 100%;
       display: flex;
       justify-content: center;
       padding-top: 1em;
   }
   

   • Aqui, removemos position: initial; e top: 0;, pois eles podem estar desconfigurando a posição correta da paginação.

Esses ajustes devem ajudar a corrigir o espaçamento entre os livros no carrossel.

Conte sempre com o apoio do fórum!