Pagination bulletClass does not work with symbol character

[dennis0126]

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