Skip to content
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

Pagination bulletClass does not work with symbol character #6486

Closed
5 of 6 tasks
dennis0126 opened this issue Mar 14, 2023 · 0 comments
Closed
5 of 6 tasks

Pagination bulletClass does not work with symbol character #6486

dennis0126 opened this issue Mar 14, 2023 · 0 comments

Comments

@dennis0126
Copy link

dennis0126 commented Mar 14, 2023

Check that this is really a bug

  • I confirm

Reproduction link

https://codesandbox.io/s/swiper-pagination-bulletclass-issue-j14vl?file=/src/App.jsx

Bug description

I am using css modules for class names, which will generate new class names with a hash appended at the end. The hash may contains symbols such as +. Eg. my generated css class name is Container_bullet__+DWjW.

I found that when I have symbol + in the bulletClass, Swiper cannot correctly append bulletActiveClass in the corresponding bullet element. I expected that the bulletActiveClass should be added in the active bullet element, but indeed it is not shown in any class name.

I simulated this behavior by hardcoding the bullet class name with symbol bullet_+DWjW as shown below in the codesandbox.

<Swiper
        pagination={{ bulletActiveClass: "bulletActive", bulletClass: "bullet_+DWjW", clickable: true }}
>
</Swiper>

Expected Behavior

<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal">
<span class="bullet__+DWjW bulletActive"></span>
<span class="bullet__+DWjW"></span>
<span class="bullet__+DWjW"></span>
</div>

Actual Behavior

<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal">
<span class="bullet__+DWjW"></span>
<span class="bullet__+DWjW"></span>
<span class="bullet__+DWjW"></span>
</div>

Swiper version

9.1.0

Platform/Target and Browser Versions

Windows, Chrome

Validations

  • Follow our Code of Conduct
  • Read the docs.
  • Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
  • Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

  • I'm willing to open a PR
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant