В слайдере - две новости, с помощью мышки - они переключаются, но вот когда добавляю пагинацию, то показывает только 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; /* Убираем прозрачность */
}
