Swiper React - replace bullets with images

Question

I want to have images instead of bullets in my Swiper carousels but the documentation is not clear on how this can be achieved.

In the renderCustom functions, how can I differentiate between active and not active?

<Swiper
    modules={[Navigation, Pagination]}
    spaceBetween={10}
    slidesPerView={2}
    navigation
    pagination={{
        clickable: true,
        type: "custom",
        renderCustom: function(swiper, current, total) {
                                
        }
   }}
   ...

I even tried overriding the bullet classes in css but nothings changes:

.swiper-pagination-bullet {
    background-image: url('../../../assets/images/slider-pagination.png') !important;
}

.swiper-pagination-bullet-active {
    background-image: url('../../../assets/images/slider-pagination-active.png') !important;
}

Answer 1

I managed to find a solution:

<Swiper
    modules={[Navigation, Pagination, FreeMode]}
    spaceBetween={10}
    slidesPerView={2}
    navigation
    pagination={{
        clickable: true,
        renderBullet: function(index, className) {
            return '<span class="' + className + '"><img class="pagination-bullet"/></span>';
        }
    }}
    ...

CSS:

.swiper-pagination-bullet > img {
    content: url('../../../assets/images/slider-pagination.png');
}

.swiper-pagination-bullet-active > img {
    content: url('../../../assets/images/slider-pagination-active.png');
}

.pagination-bullet {
    width: 1.5rem;
    margin: 0 0.1rem;
}