-
-
Notifications
You must be signed in to change notification settings - Fork 9.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Option to Handle Multiple Class through bulletClass and bulletActiveClass #3905
Comments
As a workaround take a look on
<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> |
Interesting workaround. Thanks for this. I implemented it to my application and works smoothly. In anyway, putting a multiple class support for |
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... |
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
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 ofpagination
.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 returnsnull
since it cannot handle multiple class.The text was updated successfully, but these errors were encountered: