Demo's are still in v11

[joelstransky]

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