Swiper: Option to Handle Multiple Class through bulletClass and bulletActiveClass

[Joshanity17]

I posted a question to StackOverflow; however, I got no response on this. I tried to check the code as well and I think this is not being handled currently.

This is a (multiple allowed):

• [ ] bug
• [x] enhancement
• [ ] feature-discussion (RFC)

• Swiper Version: 6.3.3
• Platform/Target and Browser Versions: Chrome (But I believe this can be replicated anywhere)
• Live Link or JSFiddle/Codepen or website with isssue: https://stackblitz.com/edit/react-ts-sa4ex7?file=index.tsx

What you did

I tried to add multiple class to the bulletClass property of pagination.

pagination={{
    clickable: true,
    bulletClass: classNames('swiper-pagination-bullet', style['feature-pagination']),
    bulletActiveClass: classNames('swiper-pagination-bullet-active', style['active'])
}}

I am trying to retain the default class of the bullets, while adding my custom styles. Of course I could have easily add my class globally, but I am working with CSS Modules, so I want this class only implemented to specific components.

Expected Behavior

Expecting to all of the classes are implemented, and the functional use case will be retain.

Actual Behavior

The styles has been applied; however, the function of pagination is not working (e.g. out of the box changing of active class, clickable pagination)

I believe the reason behind this is because of the way swiper selects the class. In this line of code, it returns null since it cannot handle multiple class.

[vltansky]

As a workaround take a look on pagination.renderbullet() function.

This parameter allows totally customize pagination bullets, you need to pass here a function that accepts index number of pagination bullet and required element class name (className). Only for bullets pagination type
For example, with this code, we can add slide number into pagination bullet:

<Swiper
        style={{ height: "50vh" }}
        spaceBetween={50}
        slidesPerView={2}
        pagination={{
          clickable: true,
          bulletClass: `swiper-pagination-bullet`,
          renderBullet: (index, className) => {
            return `<span class="${className} feature-pagination"></span>`;
          }
        }}
        onSlideChange={() => console.log("slide change")}
        onSwiper={swiper => console.log(swiper)}
      >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
      </Swiper>

https://stackblitz.com/edit/react-ts-77j8nn?file=index.tsx

[Joshanity17]

As a workaround take a look on pagination.renderbullet() function.

This parameter allows totally customize pagination bullets, you need to pass here a function that accepts index number of pagination bullet and required element class name (className). Only for bullets pagination type
For example, with this code, we can add slide number into pagination bullet:

<Swiper
        style={{ height: "50vh" }}
        spaceBetween={50}
        slidesPerView={2}
        pagination={{
          clickable: true,
          bulletClass: `swiper-pagination-bullet`,
          renderBullet: (index, className) => {
            return `<span class="${className} feature-pagination"></span>`;
          }
        }}
        onSlideChange={() => console.log("slide change")}
        onSwiper={swiper => console.log(swiper)}
      >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
      </Swiper>

https://stackblitz.com/edit/react-ts-77j8nn?file=index.tsx

Interesting workaround. Thanks for this. I implemented it to my application and works smoothly.

In anyway, putting a multiple class support for bulletClass and bulletActiveClass would be a better and elegant solution I can say. Can we create merge request for this?

[vltansky]

It's easy to implement, but it's up to @nolimits4web to decide if it should be implemented. It's called buttonClass not classes, so maybe there is a reason for this...