Primeiro coloquei as divs de classe "swiper-button-next" e "swiper-button-prev" para fora da div de classe "swiper", fiz um container para encapsular tudo e adicionei as imagens dentro das div, ficou assim o html:

<div class="swiper__container">
            <div class="swiper-button-prev"><img src="./img/SwiperPrev.svg"></div>
            <div class="swiper">
                <!-- Additional required wrapper -->

                <div class="swiper-pagination"></div>
                <div class="swiper-wrapper">
                    <!-- Slides -->
                    <div class="swiper-slide"><img src="img/ApacheKafka.svg"
                            alt="Livro sobre apache kafka e sprng boot da alura books"></div>
                    <div class="swiper-slide"><img src="img/Liderança.svg"
                            alt="Livro sobre liderança em design da alura books"></div>
                    <div class="swiper-slide"><img src="img/Javascript.svg"
                            alt="Livro sobre javascript 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 sobre portugol"></div>
                    <div class="swiper-slide"><img src="img/Acessibilidade.svg" alt="Livro sobre acessibilidade"></div>
                </div>
            </div>
            <div class="swiper-button-next"><img src="./img/SwiperNext.svg"></div>
        </div>

depois fui no css do carrossel e adicionei ao media queries as seguintes alterações:

.carrossel__titulo {
        font-size: 26px;
    }

.swiper-pagination {
    margin: 2em 0 3em 0;
}

.swiper {
    width: 80%;
}

.swiper-button-prev,
.swiper-button-next {
    display: block;
    position: relative;
    margin: 10% auto 0 0;
}
.swiper-button-prev::after{
    display: none;   
}
.swiper-button-next::after{
    display: none;   
}
.swiper__container{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 10em;
}

Sobre o problema nas setas dos swipers, elas não estavam mexendo os livros, então fui na documentação do swiper e achei o problema, faltava o navigation, talvez eu tenha perdido no meio das aulas mas acabei concertando ao tentar mexer no swiper, ficou assim o script:

 <script>

        const swiper = new Swiper('.swiper', {
            spaceBetween: 10,
            slidesPerView: 3,
            pagination: {
                el: '.swiper-pagination',
                type: 'bullets',
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    </script>

Obrigado pessoal!!!!!