Oi, Weruska, tudo bem?

O problema acontece devido à estrutura das <div> que envolvem os botões de navegação do carrossel, há um fechamento da tag <div class="swiper-pagination"> nos dois carrosséis e isso faz com que os botões dos dois carrosséis se sobreponham.

Para solucionar esse problema, você pode apagar o fechamento da tag <div>que possui a classe swiper-pagination e está antes das divs que contém os botões. Ficaria assim o código:

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

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!

Deu certo, apareceu os botões nos 2 carrosséis, mas não consigo posicionar mais eles como antes. https://github.com/timesnew-roman/alura_books_duvida.git

Oi, Weruska, como vai?

Desculpe a demora em te responder!

Para que o posicionamento dos botões fique semelhante ao que a instrutura mostra em aula, é necessário mover as tags <div> com classe swiper-button-prev e swiper-button-next para dentro da tag <div> com classe swiper e removê-las de dentro da tag <div>com classe swiper-pagination. Ficaria assim:

<div class="swiper">
    <!-- Additional required wrapper -->
    <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 Alurabooks"></div>
        <div class="swiper-slide"><img src="./assets/Liderança.svg"
                alt="Livro sobre liderança em design da Alurabooks"></div>
        <div class="swiper-slide"><img src="./assets/Javascript.svg"
                alt="Livro sobre Javascript assertivo da Alurabooks"></div>
        <div class="swiper-slide"><img src="./assets/Guia Front-end.svg"
                alt="Livro Guia front-end da Alurabooks"></div>
        <div class="swiper-slide"><img src="./assets/Portugol.svg" alt="Livro Portugol da Alurabooks"></div>
        <div class="swiper-slide"><img src="./assets/Acessibilidade.svg"
                alt="Livro Acessibilidade da Alurabooks"></div>
    </div>
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

Além disso, no arquivo "carrossel.css" dentro da media-query com valores de tela mínimos de 1024px, você pode adicionar o seguinte codigo para estilizar o posicionamento dos botões:

.swiper-button-prev, .swiper-button-next {
    display: block;
    top: 60%;
}

Espero que dê tudo certo. Caso tenha dúvidas, conte com o fórum. Abraços!