Почему пагинация в swiper отображается некорректно?

Question

[crack_user]

В слайдере - две новости, с помощью мышки - они переключаются, но вот когда добавляю пагинацию, то показывает только 1 элемент пагинации, а не два

import React from 'react';
// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/pagination';

function AllNews({ news, onNewsClick }) {
    return (
        <div className="app-news">
            <Swiper
                spaceBetween={15}
                slidesPerView={1}
                onSwiper={(swiper) => console.log(swiper)}
                centeredSlides={true}
                pagination={{
                        el: '.swiper-pagination',
                        dynamicBullets: true,
                        dynamicMainBullets: 7
                }}>
                {news.map(item => (
                    <SwiperSlide key={item.id}>
                        <div className="news">
                            <img src={item.image} alt={item.title} />
                            <h2>{item.title}</h2>
                            <a onClick={() => onNewsClick(item)}>Перейти</a>
                        </div>
                    </SwiperSlide>
                ))}
            </Swiper>
            <div className="swiper-pagination"></div>
        </div>
    );
}

export default AllNews;

.swiper-pagination {
  background-color: orange !important; /* Оранжевый цвет для точек */
  width: 12px; /* Размер точек */
  height: 12px;
  border-radius: 50%; /* Делаем точки круглыми */
  opacity: 1; /* Убираем прозрачность */
}

Comments

[Ankhena]

/* Убираем прозрачность */

Вот это самое подозрительное место.
Остальное можно узнать только в песочнице, кода недостаточно.

[crack_user]

Ankhena, Убрал opacity: 1; ничего не поменялось.
Песочница?

Код я по сути весь используемый дал, остальное - базовые файлы под проект реакта

[Ankhena]

crack_user, ну да, ещё базовые стили свайпера, которые, конечно, все знают наизусть и что-то ещё, что скрывает ваши кнопки.

Убрал opacity: 1; ничего не поменялось.

Не поменялось это хорошо.
Просто раз вы возвращаете непрозрачность на место, то логично было предположить, что сначала была прозрачность, которая и могла скрыть ваши буллеты.

Можно попробовать убрать dynamicBullets. Или может быть вторая точка крошечная. Но можно долго гадать вместо того, чтобы просто тыкнуть в девтулз и посмотреть её там в принципе нет или почему-то не видна.