I've been attempting to implement custom paginations for my component in order to have bullets outside the container, but unfortunately they are not showing up in the DOM.
Below is the code snippet of the component:
export function CommentSlider({ comments }: CommentSliderProps): ReactElement {
return (
<div className="px-4 relative">
<Swiper
modules={[Pagination]}
pagination={{
clickable: true,
el: '.swiper-custom-pagination',
}}
slidesPerView={1}
className="mt-4 h-auto !mx-0"
>
{comments.map(
(comment) =>
comment !== "empty" && (
<SwiperSlide key={uuid()} className="!px-2">
<div className="h-full w-0.5 bg-dark-gray absolute top-0 left-0" />
<Comment comment={comment} />
</SwiperSlide>
),
)}
</Swiper>
<div className="swiper-custom-pagination" />
</div>
);
}
Here's a visual representation from the browser:
click here to view image description
I also tried implementing the additional options mentioned above, but the outcome remained unchanged.
<Swiper
modules={[Pagination]}
pagination={{
clickable: true,
type: "bullets",
el: ".comment-pagination",
bulletClass: ".comment-pagination__item",
renderBullet: (index, className) => {
return `<span class="${className}" />`;
},
el: '.swiper-custom-pagination',
}}
slidesPerView={1}
className="mt-4 h-auto !mx-0"
>