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;
}

CodePudding user response：

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 ><img /></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;
}

CodePudding user response：

This CSS code work for me:

JSX:

<Swiper
        modules={[Navigation, Pagination]}
        spaceBetween={10}
        slidesPerView={2}
        navigation
        pagination
        >

Css:

background-image: url('../Assests/1200px-Location_dot_red.svg.png') !important;
background-repeat: no-repeat !important;
background-size: 100% auto !important;
background-position: center !important;