-
-
Notifications
You must be signed in to change notification settings - Fork 9.7k
Open
Description
Check that this is really a bug
- I confirm
Reproduction link
https://codesandbox.io/p/sandbox/r7t38y?file=%2Findex.html
Bug description
It needs to be clarified that if you want icons in v12+ you need 3 things in place.
You need the html as a sibling to .swiper-wrapper
<div class="swiper-wrapper">...</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>You need the modules config prop
import { Navigation, Pagination } from "swiper/modules";
...
var swiper = new Swiper(".mySwiper", {
modules: [Navigation, Pagination],
...
});You need the navigation config prop
var swiper = new Swiper(".mySwiper", {
...
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});Expected Behavior
Following the documentation while using v12 should produce navigation icons that function.
Actual Behavior
Navigation elements do not get initialized or injected with svg
Swiper version
12.0.3
Platform/Target and Browser Versions
all modern browsers
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
Metadata
Metadata
Assignees
Labels
No labels