swiper-pagination no CSS não funcionou

Ola, Thiago!!!

Antes de eu conseguir solucionar sua dúvida, preciso entender a forma como você esta usando a biblioteca Swiper.

Se você está utilizando a CDN, ou seja, puxando o no arquivo .html do seu projeto ou se está com os arquivos dessa biblioteca dentro do projeto.

Oi Felipe, obrigado pela atenção. Estou usando a CDN, com esses trechos de código:

        <section class="carousel">
            <h2 class="carousel__title">Últimos lançamentos</h2>
            <!-- Slider main container -->
            <div class="swiper">
                <!-- If we need pagination -->
                <div class="swiper-pagination"></div>

                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">
                    <!-- Slides -->
                    <div class="swiper-slide"><img src="img/ApacheKafka.svg" alt="Livro sobre Apache Kafka disponível na Alura Nookds"></div>
                    <div class="swiper-slide"><img src="img/Liderança.svg" alt="Livro sobre lidrança em design disponível na Alura Nookds"></div>
                    <div class="swiper-slide"><img src="img/Javascript.svg" alt="Livro sobre Javascript disponível na Alura Nookds"></div>
                    <div class="swiper-slide"><img src="img/Guia Front-end.svg" alt="Livro guia frontend disponível na Alura Nookds"></div>
                    <div class="swiper-slide"><img src="img/Portugol.svg" alt="Livro sobre portugol disponível na Alura Nookds"></div>
                    <div class="swiper-slide"><img src="img/Acessibilidade.svg" alt="Livro sobre acessibilidade disponível na Alura Nookds"></div>
                </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,
                pagination: {
                    el: '.swiper-pagination',
                    type: 'bullets',
                    clickable: true
                }
            });
        </script>

Perfeito! O que acontece é que, usando a CDN de uma biblioteca, ou um framework, você está espelhando um código que não possui acesso originalmente. Esse código está no ambiente do Swiper, como no seu caso, você faz uma chamada para ser usado em seu projeto.

Então, toda a estilização que for efetuada, será necessário o uso do '!important;' para forçar seu código a sobrescrever a ação aplicada, pois, como dito antes, você não possui acesso ao CSS deles.

Um exemplo para facilitar:

Imagine que o Swiper inteiro possua um 'background-color: blue', nativamente e gostaríamos de mudar para 'red, então:

.swiper { background-color: red !important; }

Agora, como originalmente não existe nenhum background no .swiper, então você não precisa utilizar o '!important' para forçar nada, pois você está adicionando uma estilização e não sobrescrevendo uma que já existe originalmente.

.swiper { background-color: red; }

Caso ainda esteja com dúvidas, não deixe de entrar em contato!

Perfeito, Felipe. Obrigado pela explicação.