Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Demo's are still in v11 #8131

Copy link
Copy link
@joelstransky

Description

@joelstransky
Issue body actions

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

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      Morty Proxy This is a proxified and sanitized view of the page, visit original site.