**Description**

There is a duplicate line of code in the `a11y` module where the same event listener is attached twice to the swiper element. This is redundant and should be cleaned up to avoid unnecessary execution or potential side effects.

**Location**

File: src/modules/a11y/a11y.mjs Lines: [354-355](https://github.com/nolimits4web/swiper/blob/ec4977b629c0823173e7b8bde7feb040a9fc4ff3/src/modules/a11y/a11y.mjs#L354C5-L355C60)

**Code Snippet**

```
swiper.el.addEventListener('focus', handleFocus, true);
swiper.el.addEventListener('focus', handleFocus, true);
```

**Expected Behavior**

The focus event listener should only be added once.

**Actual Behavior**

The focus event listener is added twice, which means `handleFocus` will be triggered twice for every focus event on the swiper element.

**Suggested Fix**

Remove one of the duplicate lines.

Repeated focus event listener in a11y.mjs

### Check that this is really a bug

- [x] I confirm

### Reproduction link

https://codesandbox.io/p/devbox/swiper-react-demo-forked-ckwctf?workspaceId=ws_8WC3YL2Rvy9rz6wusNu4z9

### Bug description

When using the a11y module and virtual module together, keyboard navigation works _at first_ but as you navigate further, it appears to eventually breaks the position of the elements by not swiping to the next slide on time. 

Video attached below. I tested on Chrome and Firefox and can consistently reproduce the issue on both browsers using latest version. I also tested one version down to check if it was a regression but it was present there too. 
https://github.com/user-attachments/assets/39f22c3b-6c4f-4e3c-a76a-c599d4e936a7

I attempted to manually trigger a virtual.update, but it doesn't appear to have made a difference. 

### Expected Behavior

You can keep tabbing to reach all elements in the slider. 

### Actual Behavior

After a certain point, tabbing to the next element will reposition the items, rather than maintaining the position within a slide. This breaks grouping and the perceived position of buttons.

### Swiper version

12.0.3

### Platform/Target and Browser Versions

MacOS Chrome v143.0.7499.193

### Validations

- [x] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [x] Read the [docs](https://swiperjs.com/swiper-api).
- [x] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [x] 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

React

Using tabbing with a11y module whilst using virtual module breaks position of elements

This is a (multiple allowed):
* [ ] bug
* [x] enhancement
* [ ] feature-discussion (RFC)

* Swiper Version: v4.5.0
* Platform/Target and Browser Versions: EVERY PLATFORM

## Expected Behavior
The slider should implement some of the features and html structure of the w3c slider example: https://www.w3.org/TR/wai-aria-practices/examples/carousel/carousel-1/carousel-1.html
The w3c example also has a list of reasons why the features and html structure they used is accessible.
This would make SwiperJS a lot more accessible. Some of the accessibility enhancements can be set with options, but this as the default would help users who don't know how to make it more accessible. It would also be a good reason to use this library instead of other slider libraries, because SwiperJS would be a good option for everyone who wants to apply wcag 2.1 standards. https://www.w3.org/TR/WCAG21/

Some of the features could only be implemented in the accessibility module, for users who don't want to use them.

## Actual Behavior
SwiperJS is only partially accessible.

## Features to implement:
* [x] `<section>` as the outer container, instead of an `<div>` element
* [x] outer container has `aria-roledescription="carousel"`
* [x] outer container has `aria-label="Example Content"` (Label can be set like the next/prev slider buttons text)
* [x] next and previous buttons are `<a>`-tags
* [x] next and previous buttons have`role="button"`
* [x] next and previous buttons has `aria-controls="swiperID"` (this connects with the id of the content)
* [x] content container has `id="swiperID"` (this connects with the aria-attribute of the next and previous buttons)
* [x] content container has `aria-live="off"` when autoplay is on and `aria-live="polite"` when autoplay is off
* [x] content item has `role="group"`
* [x] content item has `aria-roledescription="slide"`
* [x] content item has the slide number as aria-label. Example:`aria-label="1 of 6"`
* [ ] Prevent tabbing to focusable items within out-of-view slides
* [ ] Make sure disabled controls/buttons are not focusable

## Related Issues
The w3c example doesn't use clones, but this issue is also important to improve accessibility: https://github.com/nolimits4web/swiper/issues/2929
Maybe the improved keyboard accessiblity would also fix issues like this: https://github.com/nolimits4web/swiper/issues/2945

feature request

component: a11y

help wanted

Improve Accessibility Features

### Check that this is really a bug

- [x] I confirm

### Reproduction link

https://codesandbox.io/p/devbox/swiper-vue-accessibility-forked-gz4w7f

### Bug description

The Vue version has a bug in terms of accessibility when using tab to navigate, and the sliders contain focusable elements, for example, a link.
From what I saw when using Swiper without frameworks, it also behaves like this.
https://codesandbox.io/p/sandbox/swiper-keyboard-control-forked-lg72c3

### Expected Behavior

The pagination element always remains in the same position, while tabs and sliders move.

### Actual Behavior

The pagination elements disappear from the view when the focus moves to a focusable element inside a slider that wasn't visible.
Example: Having 9 sliders and a setup to show 3, when it reaches the 4th one, the pagination disappears.
But I'm not totally sure if the problem is within the pagination itself or if it's inside the wrapper, which in this case doesn't work the same way as clicking on the pagination dots or side navigation

### Swiper version

12.0.1

### Platform/Target and Browser Versions

iOS Chrome

### Validations

- [x] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [x] Read the [docs](https://swiperjs.com/swiper-api).
- [x] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [x] 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

Tab navigation makes the navigation element to disappear from the screen

When I zoom on a Swiper slide, I need to disable the previous and next slide swiping, so I use allowSlideNext and allowSlidePrev to block swiping during zoom. However, I encounter an issue where, while zoomed, I still want to use the drag feature to scroll, but it only works vertically and not horizontally. Please help me with this.

`                      <Swiper
                            modules={[Navigation, A11y, Virtual]}
                            allowSlideNext={!isZoomed}
                            allowSlidePrev={!isZoomed}
                            spaceBetween={2}
                            slidesPerView={1}
                            virtual={{
                                enabled: true,
                                cache: false,
                            }}
                            onSwiper={(swiper) => {
                                swiperRef.current = swiper;
                            }}
                            onSlideChange={navigation.handleSlideChange}
                            role="region"
                            keyboard={{
                                enabled: false,
                            }}
                        >
                            {virtualSlidesData.map((slideData) => {
                                const slideProps = getVirtualSlideProps(slideData);
                                if (!slideProps) return null;

                                return (
                                    <SwiperSlide key={slideData.slideIndex} virtualIndex={slideData.slideIndex}>
                                        <div key={slideProps.slideIndex} className={slideProps.className} style={slideProps.gridStyle}>
                                            {slideProps.slideContents.map((item) => (
                                                <ShopCarouselItem
                                                />
                                            ))}
                                        </div>
                                    </SwiperSlide>
                                );
                            })}
                        </Swiper>
`

Issue with Disabling Horizontal Drag Scrolling in Swiper Slide During Zoom

### Check that this is really a bug

- [x] I confirm

### Reproduction link

https://codesandbox.io/p/sandbox/swiper-a11y-reproduction-sygtg4

### Bug description

When the A11y module is used and enabled, content in slides that has dynamically updated text (such as the current video progress in video players) is always being announced to screen readers. This persists even if the user is not currently on the slide with dynamically updated text. Especially for carousels that have videos, this makes it impossible for those using screen readers to hear the video as the current progress of the video will consistently be read every second

Currently, there is no way to disable the wrapper from being a live region. While enabling autoplay will set the attribute to "off", this does not disable the announcements as "off" only indicates that announcements should occur when focus is inside the element

The reproduction has a basic carousel with videos using the `video.js` package. Here is a video using the reproduction and VoiceOver on mac where the video progress is announced every second (due to how video.js updates the video progress element) https://github.com/user-attachments/assets/5ae7107b-178f-4a9f-b503-496e4c1050c7


### Expected Behavior

Using the A11y module should not result in dynamic text updates always being announced to screen readers

### Actual Behavior

Using the A11y module results in dynamic text updates always being announced to screen readers

### Swiper version

11.2.10

### Platform/Target and Browser Versions

macOS, Windows

### Validations

- [x] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [x] Read the [docs](https://swiperjs.com/swiper-api).
- [x] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [x] Make sure this is a Swiper issue and not a framework-specific issue

### Would you like to open a PR for this bug?

- [x] I'm willing to open a PR

t0ggles

A11y module causes screen readers to announce every text change made inside slides

### Check that this is really a bug

- [x] I confirm

### Reproduction link

https://xvfh43.csb.app/

### Bug description

So we've been using the next and prev buttons with buttons instead of divs - for better semantics. Also with our own button accNames titles as hidden spans inside them. 

We prefer this method because then it can be translatable. The aria-label attribute isn't. This method worked fine all through v11 but just updated to v12 and noticed that the buttons have an svg being injected in. 

I see it's a feature from the blog but also noticed it was stripping out all our hidden spans from the dom too and our custom accNames on the buttons aren't being used which. 


### Expected Behavior

A way to also keep our hidden spans inside the prev and next buttons? 

### Actual Behavior

the hidden spans are being removed entirely when the svgs are being injected in

### Swiper version

12

### Platform/Target and Browser Versions

macOS firefox

### Validations

- [x] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [x] Read the [docs](https://swiperjs.com/swiper-api).
- [x] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [x] 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

Overiding custom acessibility names on navigation button

### Check that this is really a bug

- [X] I confirm

### Reproduction link

https://codesandbox.io/p/devbox/swiper-react-effect-coverflow-6pxf4v?file=%2Fsrc%2FApp.jsx%3A10%2C23

### Bug description

Hello I am using next 14.1.0. I have problem with Swiper Coverflow effect. It is not just Coverflow effect, I also tested it on Cube effect and I have simmular problem.

When I refresh the page, swiper with coverflow effect is not applied, but after few seconds coverflow effect is applied.
Same situation is for Cube effect.

I thought the problem might be with my data which is prefecthed on server, but I also tried it with hardcoded values, and I have same problem. 

In this link is video of what is happening. I have copied code from reprocuction link in my next 14.1.0 app. 
https://streamable.com/e08hl8
Everything else is same.

### Expected Behavior

It should apply Coverflow effect on initial loading.

### Actual Behavior

It does not apply Coverflow effect on initial loading.

### Swiper version

11.0.7

### Platform/Target and Browser Versions

mac OS Google Chrome,  Safari , Brave

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] Make sure this is a Swiper issue and not a framework-specific issue

### Would you like to open a PR for this bug?

- [X] I'm willing to open a PR

Swiper Coverflow Effect is broken on initial load, then it is fixes itself after few seconds

### Check that this is really a bug

- [X] I confirm

### Reproduction link

n/a

### Bug description

Fresh installation of Vite with React and TypeScript using Swiper version 9.3.2. I am getting the following error:

```
Could not find a declaration file for module 'swiper'. 

'/.../node_modules/swiper/swiper.esm.js' implicitly has an 'any' type.

There are types at '/.../node_modules/swiper/swiper.d.ts', but this result could not be resolved when respecting package.json "exports".

The 'swiper' library may need to update its package.json or typings.ts
```

Here's my code:

```tsx
// Swiper modules
import { Keyboard } from "swiper"; // This is the problem

// Swiper React components
import { Swiper, SwiperSlide, SwiperRef, SwiperClass } from "swiper/react"; // This is fine

// Swiper styles
import "swiper/css"; // This is fine
```

### Expected Behavior

Types should just work without error.

### Actual Behavior

Type error.

### Swiper version

9.3.2

### Platform/Target and Browser Versions

n/a

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] 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

Could not find a declaration file for module 'swiper'

### Check that this is really a bug

- [X] I confirm

### Reproduction link

n/a

### Bug description

Error when running using the custom build script and including "effect-cards".

Example build config:
```
import {
  parseSwiperBuildModulesEnv
} from './utils/helper.js';

const envBuildModules = parseSwiperBuildModulesEnv();

export const modules = envBuildModules || [
  'navigation',
  'effect-cards'
];

export default {
  modules,
};
```
After running `npm run build:prod` (using Node 20.10.0) I get the following error:

```
Error [RollupError]: Could not resolve "../shared/swiper-effect-utils.mjs" from "dist/modules/effect-cards.mjs"
    at error (file:///C:/www/swiper-git/node_modules/rollup/dist/es/shared/parseAst.js:337:30)
    at ModuleLoader.handleInvalidResolvedId (file:///C:/www/swiper-git/node_modules/rollup/dist/es/shared/node-entry.js:17776:24)
    at file:///C:/www/swiper-git/node_modules/rollup/dist/es/shared/node-entry.js:17738:26 {
  code: 'UNRESOLVED_IMPORT',
  exporter: '../shared/swiper-effect-utils.mjs',
  id: 'C:\\www\\swiper-git\\dist\\modules\\effect-cards.mjs',
  watchFiles: [
    'C:\\www\\swiper-git\\dist\\swiper-bundle.mjs',
    'C:\\www\\swiper-git\\dist\\shared\\swiper-core.mjs',
    'C:\\www\\swiper-git\\dist\\modules\\navigation.mjs',
    'C:\\www\\swiper-git\\dist\\modules\\effect-cards.mjs',
    'C:\\www\\swiper-git\\dist\\shared\\utils.mjs'
  ]
}
```
Other effects such as fade build successfully.

### Expected Behavior

The build to be completed successfully.

### Actual Behavior

Build fails.

### Swiper version

11.1.14

### Platform/Target and Browser Versions

Windows 10 Firefox/Chrome

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] 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

Error [RollupError]: Could not resolve "../shared/swiper-effect-utils.mjs" from "dist/modules/effect-cards.mjs"

### Check that this is really a bug

- [X] I confirm

### Reproduction link

https://stackblitz.com/edit/swiper-element-module-styles?file=app.vue,components%2FBaseImageSlider.vue

### Bug description

I am using Swiper element (web component) version as described here: https://swiperjs.com/element

I would like to use Core module + modules to only add the modules i really use. For performance reasons.
So i tried to follow the instructions here: https://swiperjs.com/element

Regarding the docs these module style url injects should be possible:

```
injectStylesUrls: [
      'swiper/element/css/a11y',
      'swiper/element/css/keyboard',
      'swiper/element/css/navigation',
      'swiper/element/css/mousewheel',
    ],
```
    
But it does not work. No matter which export urls i try. it does not get applied.

### Expected Behavior

Style url inject of the module styles should work

### Actual Behavior

Not working. No styles applied

### Swiper version

11.1.1

### Platform/Target and Browser Versions

macOS Google Chrome Version 123.0.6312.107 (Offizieller Build) (arm64)

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] 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

 Core Version & Element Modules - unable to inject module style urls

### Check that this is really a bug

- [X] I confirm

### Reproduction link

https://codesandbox.io/embed/swiper-slides-per-view-forked-n8pht9?fontsize=14&hidenavigation=1&theme=dark

### Bug description

Hello,

everything works just great in 99% of scenarios, although I found an odd bug that causes the slider to roughly jump once the input field gets focused - it doesn't even swipe, it simply instantly jumps to another section.


### Expected Behavior

When input/textarea gets focused, swiper should stay.

### Actual Behavior

When input/textarea gets focused, swiper jumps oddly (it doesn't even swipe).

### Swiper version

8.3.2

### Platform/Target and Browser Versions

All

### Validations

- [x] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [x] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] Make sure this is a Swiper issue and not a framework-specific issue

### Would you like to open a PR for this bug?

- [x] I'm willing to open a PR

Accessibility issue: Focusing on input forces slider to jump

This is a (multiple allowed):
* [ ] bug
* [x] enhancement
* [ ] feature-discussion (RFC)

* Swiper Version: 6.0.4
* Platform/Target and Browser Versions: Ubuntu 18 // Google Chrome 84.0.4147.105

### Issue
I wish I could move arrows and pagination/scrollbar outside the slider (not over). Now it's impossible to do it correctly and honour the vertical/horizontal direction.

* `swiper-container` has `overflow:hidden`, so I can't position arrows/pagination/scrollbar elements outside it or they get hidden.
I can't remove the `overflow:hidden` property from container or slides get visible outside the container...
* `xxx-horizontal` and `xxx-vertical` classes are added to `swiper-container`, so even if I take the arrows/pagination/scrollbar outside the container, I'd be unable to know which direction is the slider configured with (yes, I could use the "all siblings css selector" `~`, but I'd feel kinda dirty)

### Possible solutions
1. Add extra `div` around the `swiper-wrapper`, something like `swiper-clip` that has the `overflow:hidden` style.
```html
<div class="swiper-container">
    <div class="swiper-clip">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            ...
        </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-scrollbar"></div>
</div>
```
2. Search for `wrapperClass` hierarchically within the element, instead of searching only direct children. Use `find` method here (like it is used for `prevEl`, `nextEl`, `pagination.el`, ...): https://github.com/nolimits4web/swiper/blob/77d72e411ef91b7580eb8fb96f05f0e43a0a6b90/src/components/core/core-class.js#L144
This way I could create the `swiper-clip` element myself


Option 1 would be my prefered, though it would not be simple, and may cause a new major version.
Option 2 is very simple, just a patch.

Navigation and pagination positioning around slider (not over)

### Clear and concise description of the problem

The Accessibility module currently allows for a `aria-roledescription` attribute on the slider container via the   [containerRoleDescriptionMessage](https://swiperjs.com/swiper-api#param-containerRoleDescriptionMessage) option, but there is no support for setting a `role` to the same container.

As per https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription, this is a slight violation of best practices, and my a11y auditors have flagged it as an issue to be fixed.

### Suggested solution

Add a `containerRole` parameter to the Accessibility module so we can set the proper role (`region`) when setting the `containerRoleDescriptionMessage` option.

### Alternative

_No response_

### Additional context

_No response_

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

### Would you like to open a PR for this feature?

- [ ] I'm willing to open a PR

A11y: Add containerRole parameter

### Clear and concise description of the problem

The Accessibility module currently allows for a aria-roledescription attribute on the slider container via the [containerRoleDescriptionMessage](https://swiperjs.com/swiper-api#param-containerRoleDescriptionMessage) option, but there is no support for setting a role to the same container.

As per https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription, this is a violation of best practices, and my a11y auditors have flagged it as an issue to be fixed.

**Ensure aria-roledescription is only used on elements with an implicit or explicit role. Success criteria 4.1.2**

### Suggested solution

Add a containerRole parameter to the Accessibility module so we can set the proper role (region) when setting the containerRoleDescriptionMessage option.

### Additional context

Answers for @nolimits4web 

#### What is the issue? 

Providing users an ability to set an aria-roledescription without an aria role is an accessibility error.

#### What does it do? 

Adding this would allow Swiper to be more accessible.

#### What is it for? 

Better accessibility.

#### What does it fix? 

The accessibility error of having an aria-roledescription without a proper role.

#### Why you can't just add aria-role with "hands" to HTML element?

For the same reason you provide `containerRoleDescriptionMessage` in the first place: we don't always have direct control over the markup.

> Clearly describe the issue including steps to reproduce when it is a bug.
> Make sure you fill in the earliest version that you know has the issue.
> Provide live link or JSFiddle/Codepen or website with isssue

This is on all versions, it's a new feature being added, not a code bug to reproduce. The w3 guidelines for this are linked above.

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

### Would you like to open a PR for this feature?

- [X] I'm willing to open a PR

Feature Request for A11y: Add containerRole parameter

### Check that this is really a bug

- [X] I confirm

### Reproduction link

https://swiperjs.com/demos

### Bug description

I've encountered an issue when using SwiperJS on iPhones. Whenever I try to use the pinch-zoom feature, the page crashes. Notably, this isn't just limited to my implementation — the same issue is observed on the official SwiperJS demo pages.

### Expected Behavior

The slides should zoom in/out smoothly without causing any disruptions.

### Actual Behavior

The entire page crashes upon attempting the pinch-zoom gesture.

### Swiper version

Lastest

### Platform/Target and Browser Versions

ios Safari 16.5

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] 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

SwiperJS Causes Crash on iPhone During Pinch-Zoom

### Check that this is really a bug

- [x] I confirm

### Reproduction link

https://codesandbox.io/p/sandbox/theme-reducer-context-rtl-and-light-or-dark-mode-forked-t8fyyr?file=%2Fsrc%2FApp.js%3A1%2C1-70%2C1

### Bug description

im have next.js version 15 app i need add Thumbs gallery in one page i try this : thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null but always give me error : TypeError: Cannot convert undefined or null to object

simple demo code : https://codesandbox.io/p/sandbox/theme-reducer-context-rtl-and-light-or-dark-mode-forked-t8fyyr

this is my project-detail-thumbs-slider.tsx:
```
"use client";

import Slider from "@/components/ui/slider";
import Image from "next/image";
import { useState } from "react";
import Swiper from "swiper";
import { FreeMode, Thumbs } from "swiper/modules";

export default function ProjectDetailThumbsSlider() {
  const [thumbsSwiper, setThumbsSwiper] = useState<Swiper | null>(null);

  return (
    <div className="w-full h-full flex flex-col gap-2 rounded-xl">
      <Slider
        childKey="thumbs"
        props={{
          modules: [FreeMode, Thumbs],
          thumbs: {
            swiper:
              thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null,
          },
          className: "w-full h-3/4 rounded-t-xl",
        }}
      >
        {Array(10)
          .fill(0)
          .map((item, index) => (
            <Image
              className="object-cover"
              key={index}
              fill
              src={`https://swiperjs.com/demos/images/nature-${index + 1}.jpg`}
              alt="nature"
            />
          ))}
      </Slider>
      <Slider
        childKey="gallery"
        props={{
          onSwiper: (swiper) => {
            console.log("LINE 45  onSwiper: ", swiper);
            setThumbsSwiper(swiper);
          },
          slidesPerView: 4,
          freeMode: true,
          watchSlidesProgress: true,
          modules: [FreeMode, Thumbs],
          className: "w-full h-1/4 rounded-b-xl",
          spaceBetween: 5,
        }}
      >
        {Array(10)
          .fill(0)
          .map((item, index) => (
            <Image
              className="object-cover"
              key={index}
              fill
              src={`https://swiperjs.com/demos/images/nature-${index + 1}.jpg`}
              alt="nature"
            />
          ))}
      </Slider>
    </div>
  );
}
this is slider:

"use client";
import React from "react";
import { Swiper, SwiperProps, SwiperSlide } from "swiper/react";
import { A11y, Autoplay, Navigation, Pagination } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import { useTheme } from "@/hooks/useTheme";

function Slider({
  children,
  props = {}, // Default to an empty object
  childKey,
}: {
  children: React.ReactNode;
  props?: SwiperProps;
  childKey: string;
}) {
  const { state } = useTheme();

  return (
    <Swiper
      key={`${state.dir} ${childKey}`}
      dir={state.dir}
      modules={[
        Autoplay,
        A11y,
        Navigation,
        Pagination,
        ...(props.modules || []),
      ]}
      {...props}
    >
      {React.Children.map(children, (child, index) => (
        <SwiperSlide key={index}>{child}</SwiperSlide>
      ))}
    </Swiper>
  );
}

export default Slider;
```

### Expected Behavior

im give this error : TypeError: Cannot convert undefined or null to object when change my direction i have two more slider but other slider work without error just this slider because have thumbs or two swiper in one file with same key why i use same key ? because direction in swiper just work with key key = "rtl" im try childKey props key = `${state.dir} ${childKey}`  but nothing change

how Thumbs gallery work ? when dont change dir or remove key from Slider component key or remove thumbs in project-detail-thumbs-slider.tsx or remove onSwiper action on project-detail-thumbs-slider.tsx

### Actual Behavior

_No response_

### Swiper version

11.1.15

### Platform/Target and Browser Versions

chrome

### Validations

- [x] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [x] Read the [docs](https://swiperjs.com/swiper-api).
- [x] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [x] Make sure this is a Swiper issue and not a framework-specific issue

### Would you like to open a PR for this bug?

- [x] I'm willing to open a PR

react swiper - Cannot convert undefined or null to object when using Thumbs module and change dir state on nextjs

- Swiper Version: 6.5.3.
- Platform/Target and Browser Versions: Chrome, but likely occurs in all browsers.
## What You Did
Use tailwind classes in bullet pagination config that contain nonstandard/special characters: 
- `.` when followed by a number. E.g. `w-2.5`
- `:`, E.g. `sm:w-2`
- `/` E.g. `w-1/2`

Reproduction + implemented all possible solutions mentioned below.
https://stackblitz.com/edit/swiper-demo-1-default-ndmkbc?devtoolsheight=33&file=index.js

## Expected Behavior
It shouldn't error out and work just like you'd expect.

## Actual Behavior
It's erroring out with an `Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Element': ... is not a valid selector.`

## Additional Info
I think this might be better if it was in dom7. Since it ultimately goes through [dom7's find method](https://github.com/nolimits4web/dom7/blob/v3.0.0/src/methods.js#L762-L771), it makes sense to escape there which makes it easier for devs since they don't have to deal with escaping. The only special character that's slightly tricky is `.`.

Using `w-2.5 sm:w-1/2` as an example, swiper js is going to pass `.w-2.5.sm:w-1/2` to dom7. Dom7 would then escape:
- `.` (only if it's immediately followed by a digit)
- `:`
- `/`

This should handle most cases and 100% of tailwind.

## Dom7 Solution
```js
selector.replace(/(\.(?=\d)|:|\/)/g, "\\$1"); 
```
Regex demo/test - https://regex101.com/r/DhAilO/1/
Aside from the `find` method in dom7, I'm not sure if other methods will need refactoring.

## Or, Swiper Solution
**Solution #1** 
Escape the known problematic characters. Other than that, it's the same thing that's already in place. 
```js
'.' + selector
    .replace(/([\.:\/])/g, "\\$1")
    .replace(/ /g, ".");
}
```

**Solution #2**
Less regex. Easier to read. Probably covers more characters than solution 1. 
Less browser support and experimental but it meets the requirements listed in swiper's package.json. 
https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape

```js
'.' + selector
    .split(' ')
    .map(CSS.escape)
    .join('.');
```

## Other helpful things
**Docs about escaping special characters**
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#escaping_special_characters

**Relevant Lines I Found**
https://github.com/nolimits4web/swiper/blob/v6.5.3/src/components/pagination/pagination.js#L221
https://github.com/nolimits4web/swiper/blob/v6.5.3/src/components/pagination/pagination.js#L276
https://github.com/nolimits4web/swiper/blob/v6.5.3/src/components/pagination/pagination.js#L305
https://github.com/nolimits4web/swiper/blob/v6.5.3/src/components/a11y/a11y.js#L76
https://github.com/nolimits4web/swiper/blob/v6.5.3/src/components/a11y/a11y.js#L214
https://github.com/nolimits4web/swiper/blob/v6.5.3/src/components/a11y/a11y.js#L248

Pagination classes with special characters aren't escaped. Throws a DOMException 

### Clear and concise description of the problem

Currently, changing the default values of accessibility parameters is only possible with JavaScript API.

### Suggested solution

When using custom markup, it would be much more convenient to change aria attributes through the attribute value.

When setting
```js
navigation: {
  nextEl: '.swiper-button-next',
  prevEl: '.swiper-button-prev',
}
```
the accessibility parameters on the elements `.swiper-button-next` and `.swiper-button-prev` change the default values.

```html
<button class="swiper-button-next" aria-label="Siguiente diapositiva"></button>
```

### Alternative

Use JavaScript API
```js
navigation: {
  nextEl: '.swiper-button-next',
  prevEl: '.swiper-button-prev',
},
a11y: {
  nextSlideMessage: 'Siguiente diapositiva',
  prevSlideMessage: 'Diapositiva anterior'
},
```

With custom markup, specifying aria attributes in HTML will be more straightforward and easier to maintain.

### Additional context

_No response_

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

### Would you like to open a PR for this feature?

- [ ] I'm willing to open a PR

Get accessibility parameters from markup

This is a (multiple allowed):
* [x] bug
* [ ] enhancement
* [ ] feature-discussion (RFC)

* Swiper Version: 4.4.2.
* Platform/Target and Browser Versions: iOS 10 and above.

### What you did
We have a slider with the following basic settings:
pagination: {
                    el: '.swiper-pagination',
                },

### Expected Behavior
When swiping on an iOS device, the pagination buttons should register an active class state change for the correct bullet.

### Actual Behavior
Swiping on a slide does not update the pagination active state. Emulating touch on Chrome works but real devices or emulators for iOS show the bug.

component: pagination

Swiping on a slide does not update the pagination active state on iOS Devices

### Clear and concise description of the problem

At the moment, the A11Y module, when changing focus from one slide to another, scrolls to the one on which the focus fell. 

However, this behavior can be dangerous when we have slides that are interactive (such as those wrapped in a/button, or contain inetractive elements)

For example, in a carousel of 10 elements, where 2 elements are fully displayed, when focusing on 2 elements, it will open 3 elements, then the focus will be on 3, 4 and so on in order.

However, it is expected that I can only focus on those elements that are currently in view either completely or partially. However, with this scrolling, a person will have to go through all the elements of the carousel through the tab before he reaches the "Next" button

### Suggested solution

I suggest adding the 'scrollOnFocus' property with a zero value, which will prevent scrolling to the element that was focused. At the same time, the default value will be 'true', which will avoid backward compatibility issues.

### Alternative

_No response_

### Additional context

_No response_

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

### Would you like to open a PR for this feature?

- [X] I'm willing to open a PR

A11Y: Added prop 'scrollOnFocus' to A11Y module

Hey there 🌳 🌻 
by default swiper gives the wrapper element a `role="list"` and all of its children slides a `role="group"`. Based on what Lighthouse says, this is not how its supposed to be done. A `role="list"` element should contain at least one children with `role="listitem"`. Please have a look at the [ARIA documentation](https://www.w3.org/TR/wai-aria/#usage_intro).

---

<img width="718" alt="Screenshot 2021-04-12 at 19 33 06" src="https://user-images.githubusercontent.com/20298313/114437435-d851c700-9bc6-11eb-8dce-b467903fa753.png">

---

Would be super lovely if this would be changed. Or am I missing something here?

Thank you @nolimits4web!
🙏🏻 

ARIA accessibility error in Lighthouse

This is a (multiple allowed):
* [x] bug
* [ ] enhancement
* [ ] feature-discussion (RFC)

* Swiper Version: EXACT RELEASE VERSION OR COMMIT HASH, HERE.
* Platform/Target and Browser Versions: PLATFORM CLIENT YOU ARE TARGETING SUCH AS macOS, Windows, CORDOVA, IOS, ANDROID, CHROME, ETC.
* Live Link or JSFiddle/Codepen or website with issue: PREFERABLY _(IF YOU WANT YOUR ISSUE TO BE RESOLVED ASAP)_.
### What you did
EXPLAIN WHAT YOU DID, PREFERABLY WITH CODE EXAMPLES, HERE.

When I assign 
```
pagination = {{ 
     el: 'swiper-pagination-timeline-page',
}}
```
inside my react component the pagination div disappears. When I [specify the element](https://swiperjs.com/react/) the whole thing doesn't even render. Please see my component code at the end of thread:

I feel like a need better clarification on this:

<img width="1010" alt="Screen Shot 2020-08-13 at 9 02 09 PM" src="https://user-images.githubusercontent.com/18686388/90212509-818ab800-ddc1-11ea-8412-1d51003b8b87.png">


### Expected Behavior
EXPLAIN WHAT IS TO BE EXPECTED, HERE.

I am expecting to see the element render with the class `.swiper-pagination-timeline-page` assigned to it. 

### Actual Behavior
EXPLAIN WHAT IS ACTUALLY HAPPENING, HERE.
when I assign this attribute it does not render the pagination element. 

P.S. Remember, an issue is not the place to ask questions. You can use [Stack Overflow](http://stackoverflow.com/questions/tagged/swiper)
for that.

Before you open an issue, please check if a similar issue already exists or has been closed before.

Component Code

```
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y, Lazy} from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import React from 'react';


SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Lazy]);

export default class Timeline extends React.Component {

    constructor(props) {
        super(props);

    }
      
    componentDidMount() { }

    componentWillMount() { }

    render() {
        return (
            <>
                <Swiper
                loadPrevNext = {1}
                preloadImages = {0}
                lazy = {1}
                spaceBetween = {0}
                slidesPerView = {1}
                direction = 'vertical'
                pagination = {{ 
                    clickable: true,
                    // el: 'swiper-pagination',
                    type: 'bullets',
                    bulletElement: 'span',
                    bulletClass: 'timeline-icon',
                    bulletActiveClass: 'timeline-icon-active',
                    renderBullet: function (index, className) {
                        return '<span class="' + className + '">' + (index + 1)  + ' icon ' + '</span>';
                    }
                }}
                >
                    <SwiperSlide>
                            1
                    </SwiperSlide>
                    <SwiperSlide>
                            2
                    </SwiperSlide>
                    <SwiperSlide>
                            3
                    </SwiperSlide>
                    <SwiperSlide>
                            4
                    </SwiperSlide>
                    <SwiperSlide>
                            5
                    </SwiperSlide>
                    <SwiperSlide>
                            6
                    </SwiperSlide>
                    <SwiperSlide>
                            7
                    </SwiperSlide>
                    <SwiperSlide>
                            8
                    </SwiperSlide>
                    <SwiperSlide>
                            9
                    </SwiperSlide>
                    <SwiperSlide>
                            10
                    </SwiperSlide>
                </Swiper>

                <style jsx>{`

                    .swiper-container-vertical > .swiper-pagination-bullets {
                        top: 50% !important;
                        position: absolute !important;
                        left: 0px !important;
                        background: red !important;
                        display: flex !important;
                        flex-direction: column !important;
                    }

                    .timeline-icon {
                        cursor: pointer;
                    }
    
                    .swiper-container {
                        width: 100%;
                        height: auto !important;
                    }

                    .swiper-slide {
                        text-align: center;
                        font-size: 18px;
                        background: #fff;
                        /* Center slide text vertically */
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: -webkit-flex;
                        display: flex;
                        -webkit-box-pack: center;
                        -ms-flex-pack: center;
                        -webkit-justify-content: center;
                        justify-content: center;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        -webkit-align-items: center;
                        align-items: center;
                    }

                    @media only screen and (max-width: 500px) { }

                    .swiper-pagination {
                        position: absolute;
                        text-align: center;
                        transition: 300ms opacity;
                        transform: translate3d(0, 0, 0);
                        z-index: 10;
                    }

                `}</style>
            </>
        );
    }
}


```

Pagination.El not making attribute with React

This is a (multiple allowed):
* [x] bug
* [ ] enhancement
* [ ] feature-discussion (RFC)

* Swiper Version: 6.0.3
* Platform/Target and Browser Versions: macOS, CHROME.

https://swiperjs.com/demos/110-slides-per-view.html

### What you did
The issue I'm seeing is the same as on the demo link.

### Expected Behavior
Clicking the current slide should not move to the next click, only click the next slide should have this behaviour.

### Actual Behavior
Click slide 1 and it navigates to slide 2, when you get to the middle it's then pot luck which way it goes something left sometimes right. Even before the middle it sometimes goes one way or another.

Clicking on a slide moves to next slide (sometimes previous)

### Check that this is really a bug

- [X] I confirm

### Reproduction link

-

### Bug description

firstly, thanks for the great work! and apologies for not being able to provide a replication. 

bug: when there is a hash in the initial URL, subsequent `swiper.slideTo` breaks.

```typescript
const swiper = useSwiper()

const goToSlide = (hash: string) => {
  const index = swiper.slides.findIndex((slide) => 
    slide.attributes.getNamedItem('data-hash')?.value === hash
  )
  swiper.slideTo(index)
}
```
also tried
```typescript
window.location.hash = hash
```
but both will redirect to the wrong slide

this is the config for swiper
```typescript
<Swiper
      onSwiper={(instance) => (swiper.current = instance)}
      allowTouchMove={false}
      pagination={{ type: 'progressbar', progressbarOpposite: true }}
      keyboard
      mousewheel={{ forceToAxis: true, thresholdTime: 800, thresholdDelta: 20 }}
      direction='vertical'
      a11y={{ enabled: true }}
      hashNavigation={{
        watchState: true,
        replaceState: true,
      }}
      modules={[Keyboard, Mousewheel, Pagination, HashNavigation]}
>
  {shouldShowSlide1 && <Slide1 />}
  {shouldShowSlide2 && <Slide2 />}
  {shouldShowSlide3 && <Slide3 />}
  {shouldShowSlide4 && <Slide4 />}
</Swiper>
```

example: visiting `www.example.com/#slide3` loads slide 3, but when we programmatically move to slide 1 using `goToSlide`, it will show slide 2 instead

have been stuck on this issue for some time. any help would be greatly appreciated! thank you! 🙏 

edit: adding more info
running Swiper React on NextJS 14

### Expected Behavior

Scrolling should work as expected

### Actual Behavior

Does not scroll to the slide with the correct index or hash

### Swiper version

10.3.1

### Platform/Target and Browser Versions

macOS Chrome

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] 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

Initial URL with hash breaks navigation

This is a (multiple allowed):
* [x] bug
* [ ] enhancement
* [ ] feature-discussion (RFC)

* Swiper Version: 6.1.2
* Platform/Target and Browser Versions: Chrome, but issue is on every platform

### What you did
Setup `<Swiper>` React

### Expected Behavior
When I'm trying to drag/drop, the console throws the following error

```
Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'
```

### Actual Behavior
No error should be thrown, and I should be able to drag/drop

Example:

```.tsx
<nav>
   <Swiper
         centeredSlides
         slidesPerView={'auto'}
         freeMode
         mousewheel
         grabCursor
         virtual
         simulateTouch
         wrapperClass="breadcrumbs-wrapper" // doesn't work
         wrapperTag="ol"
         initialSlide={navigationItems.length - 1}
         aria-label="Breadcrumbs"
         css={styles.root} // using Emotion
    >
      {navigationItems.map((item, idx, array) => {
          return (
           <SwiperSlide
                tag="li"
                key={`${item.label}_${idx}`}
                css={styles.item}
                slot="wrapper-start" // have to add "wrapper-start" otherwise `li` elemnts are out of the `ol` wrapper element...
              >
                 ... content
           </SwiperSlide>
        )
      })}
    </Swiper>
</nav>
```
Also little note: the `breadcrumb-wrapper` class is not applied and I had to add `slot="wrapper-start"` :/ 

missing demo

[Swiper React] Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'

### Check that this is really a bug

- [X] I confirm

### Reproduction link

https://codesandbox.io/s/swiper-slides-grid-react-forked-ec0pu?file=/src/App.jsx

### Bug description

Hi there! I am trying to enable the multirow slider using [grid](https://swiperjs.com/swiper-api#grid) parameters, but it doesn't work. 


### Expected Behavior

It should work like in the demos https://swiperjs.com/demos#slides-grid.

### Actual Behavior

_No response_

### Swiper version

7.0.0

### Platform/Target and Browser Versions

macOS Chrome

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] 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

Can't enable the multirow slider using grid parameters

### Check that this is really a bug

- [X] I confirm

### Reproduction link

https://codesandbox.io/p/sandbox/swiper-navigation-forked-yw4g5x?file=%2Findex.html

### Bug description

Next/Prev navigation buttons (.swiper-button-prev and swiper-button-next) don't work when keyboard is used to navigate.   This is needed to navigate the swiper carousel for Accessibility - currently keyboard/assistive tech users can't access the carousel.

To replicate, go to the Reproduction link (this is direct fork of navigation demo, no adjustments), use keyboard "tab" key to focus swiper arrow, once in focus press keyboard "Enter/Return" key.


Affected code is shown here:
<img width="821" alt="Screenshot 2024-03-27 at 1 21 14 pm" src="https://github.com/nolimits4web/swiper/assets/88119121/7193080b-4c5c-4d76-ba05-da3f871756f0">

Small tweak to code fixes the issue...
<img width="745" alt="Screenshot 2024-03-27 at 1 10 13 pm" src="https://github.com/nolimits4web/swiper/assets/88119121/9679ba12-c9c0-4e39-847e-3f321682e195">



### Expected Behavior

Pressing Enter key when next/prev arrows are in focus should trigger the carousel to slide.

### Actual Behavior

Pressing Enter key when next/prev arrows are in focus does nothing.

### Swiper version

11.0.7

### Platform/Target and Browser Versions

MacOS Chrome 122.0.6261.139

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] 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

Next/Prev buttons not working when navigation via keyboard

### Check that this is really a bug

- [X] I confirm

### Reproduction link

- https://codesandbox.io/p/sandbox/quizzical-lehmann-kxhm3v (straight element, warning)
- https://codesandbox.io/p/sandbox/lucid-moser-75vdwr (init on useEffect, no warning)

### Bug description

Just adding the element as per the docs shows this warning, on npm run build it works OK. I know it's a warning but maybe it's an issue and related to #6820, where I am using the same sandboxes for what I am reporting.

However, if I use useEffect, the warning is not there.

### Swiper version

10.0.3

### Platform/Target and Browser Versions

macOS Brave v1.52.129

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] 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

Swiper element on react: Warning: Extra attributes from the server: style,role,aria-label,class

### Clear and concise description of the problem

Swiper [notificationClass](https://swiperjs.com/swiper-api#param-a11y-notificationClass) generates an empty span:

`<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>`

Demo link: https://codepen.io/ingvoo/pen/oyjgEp

There are no updates occurring in this container, its [purpose is unclear](https://github.com/nolimits4web/swiper/discussions/5837) and [BITV-Tests](https://webtest.bitv-test.de/index.php?a=di&iid=295) are invalid.

### Suggested solution

In order to pass BITV-Tests this span should be removed by (optionally) disabling [notificationClass](https://swiperjs.com/swiper-api#param-a11y-notificationClass)

### Alternative

_No response_

### Additional context

_No response_

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

### Would you like to open a PR for this feature?

- [X] I'm willing to open a PR

A11y - disable span.swiper-notification

### Check that this is really a bug

- [X] I confirm

### Reproduction link

hhtps://i-provide-code-in-description

### Bug description

hi guys i’ve a problem with swiper/react package in ssr mode

i got an parent component that fetch data and pass it to a component 
the child component show product in slider but problem is in first 0.5 second of first renedr all styles are messed up (in csr work well)
have you any idea how to handle it?! i think the problem related to slow loading of react-swiper

my parent component =>

 ```
export default async function Home() {
  const { data, categoryBox } = await coreUseCase.getBaseData();
  const {
      topCenterSlider,
     } = data;
  return (
    <div className={styles.home}>
      <TopSlider list={topCenterSlider} />
</div>  
```

my child component =>

```
import { SwiperSlide } from "swiper/react";
import { NextLink } from "@/components/Common";
import { Btn, Slider } from "@/components/Common";
import styles from "./TopSlider.module.scss";
import { Img } from "@/components/Common";
import { coreConstant } from "@/constant";
const sliderSettings = {
  navigation: false,
  loop: true,
  autoplay: {
    delay: 3000,
    disableOnInteraction: false,
  },
};

export default function TopSlider({ list }) {
  return (
    <div className={styles["top-slider"]}>
      <Slider settings={sliderSettings}>
        {list
          ?.filter((fil) => fil?.isEnable)
          ?.map((item, key) => (
            <SwiperSlide key={key}>
                           <figure className={styles["top-slider__img"]}>
                  <Img alt={item?.title} path={item?.image} category={coreConstant.Sliders} />
                </figure>
                <div className={styles["top-slider__details"]}>
                  <p className={styles["top-slider__details-text"]}>{item?.metaTitle}</p>
                </div>
                       </SwiperSlide>
          ))}
      </Slider>
    </div>
  );
}
```
my slider component =>
``` 
import { Swiper } from "swiper/react";
import { Navigation, Pagination, Scrollbar, A11y, Keyboard, Thumbs, Autoplay } from "swiper/modules";

import "swiper/css/bundle";
import "swiper/css";

const Slider = ({ settings, children }) => {
  const settingConfigs = {
    modules: [Navigation, Pagination, Scrollbar, A11y, Keyboard, Thumbs, Autoplay],
    pagination: { clickable: true },
    navigation: true,
    loop: true,
    ...settings,
  };

  return <Swiper {...settingConfigs}>{children}</Swiper>;
};

export default Slider;
```

### Expected Behavior

_No response_

### Actual Behavior

_No response_

### Swiper version

11.0.4

### Platform/Target and Browser Versions

chorome 

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] 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

swiper/react problem in ssr mode 

Hello, I am working with an accessibility expert, she took a look at Swiper and told me this. Is this something fixable on your end? Thanks!

> The aria-live attribute does not work, because the elements do not disappear and appear. You should know that for the aria-live to announce new content, it must know that there is new content. To do this, the hidden slides should be hidden by display:none and when they appear, we remove the display:none. The aria-live will then announce the new content of the slide.

Aria-Live attribute not working for screen readers

### Check that this is really a bug

- [X] I confirm

### Reproduction link

https://codepen.io/christinatopp/pen/BaVqPVm

### Bug description

For accessibility purposes, we use the a11y- and pagination module. Our users should be able to navigate our site and also the swiper just by using the tab key. We want them to tab through all pictures but not be able to focus the pagination.

### Expected Behavior

Pagination should be clickable but not focusable (with tab key)

### Actual Behavior

Users can tab through all pictures (with tab key). Afterwards they have to tab through all pagination bullets which is unnecessary and senseless in regards of accessibility.

### Swiper version

8.4.4

### Platform/Target and Browser Versions

 macOS, Windows, Chrome, Firefox, Safari

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] Make sure this is a Swiper issue and not a framework-specific issue

### Would you like to open a PR for this bug?

- [X] I'm willing to open a PR

Distinguish between keyboard focus and clickablity on pagination bullets

### Clear and concise description of the problem

Dear Swiper Team,

I hope this message finds you well. I am an avid user of Swiper and have found it to be an essential component in my Angular project. The features and functionality provided by Swiper greatly contribute to the user experience, and I appreciate the effort your team puts into maintaining and improving the library.

However, I have encountered a challenge in integrating Swiper seamlessly with Angular due to the absence of official Angular support. As Angular is a widely used framework in the development community, having a dedicated Angular version of Swiper would be immensely beneficial for many developers.

I would like to kindly request the development of an official Angular version of Swiper, complete with Angular-specific documentation, bindings, and best practices. This addition would not only simplify the integration process for Angular developers but also enhance the overall accessibility of Swiper within the Angular ecosystem.

Thank you for your time and continued dedication to improving Swiper.

Best regards

### Suggested solution

none

### Alternative

_No response_

### Additional context

_No response_

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

### Would you like to open a PR for this feature?

- [X] I'm willing to open a PR

Request for Angular Version Support in Swiper

### Check that this is really a bug

- [X] I confirm

### Reproduction link

https://codepen.io/upydavide/pen/dygrVbv

### Bug description

When within the swiper-slide I try to open a modal when I close it swiper sets the slide containing the previousvly clicked button as the active slide and "jump" to it.

No problem up to v. 7.41 - issue in Swiper 8 and 9

### Expected Behavior

_No response_

### Actual Behavior

Codepen: open the modal with the button placed inside swiper, then try to close the modal.

### Swiper version

9.3.2

### Platform/Target and Browser Versions

Chrome

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] 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

Swiper "jump" strange behavior

This is a:
* [x] bug
* [ ] enhancement
* [ ] feature-discussion (RFC)

* Swiper Version: 5.4.5
* Platform/Target and Browser Versions: All
* https://jsfiddle.net/snf2g34h/1/

### What you did
Attempting to initialize with `allowSlideNext` or `allowSlidePrev` works, but does not apply the `disabledClass` to the button.

### Expected Behavior
Navigation button is initialized with the `swiper-button-disabled` and `aria-disabled="true"`

### Actual Behavior
Navigation button _looks_ enabled, but actually isn't.


probably bug

disabledClass for Navigation Never Applied

* Swiper Version: 6.2.0
* Platform/Target and Browser Versions: All

Also posten on Stackoverflow:
[Swiper React | How to create custom navigation/pagination components using React refs?](https://stackoverflow.com/questions/64099383/swiper-react-how-to-create-custom-navigation-pagination-components-using-react)

### What you did
```jsx
const MySwiper = () => {
  const navigationPrevRef = React.useRef(null)
  const navigationNextRef = React.useRef(null)

  return (
    <Swiper
      navigation={{
        prevEl: navigationPrevRef.current,
        nextEl: navigationNextRef.current,
      }}
    >
      <SwiperSlide>slide 1</SwiperSlide>
      <SwiperSlide>slide 2</SwiperSlide>
      <div ref={navigationPrevRef} />
      <div ref={navigationNextRef} />
    </Swiper>
  )
}
```

### Expected Behavior
To work

### Actual Behavior
Did not work

---

[SwiperJS documentation](https://swiperjs.com/api/#navigation) states that navigation prevEl/nextEl can either be of type "string" or "HTMLElement". Using HTML nodes allows for navigation prevEl/nextEl to be scoped to each rendered instance of `MySwiper`. In React this is usually done with "refs".

```jsx
const App = () => (
  <div>
    <MySwiper /> // MySwiper1
    <MySwiper /> // MySwiper2
  </div>
)
```

In the `App` example above, navigation prevEl/nextEl from "MySwiper2" should not trigger sliding of "MySwiper1", which is what would happen if one would have used string selectors like `{ prevEl: '.prev', nextEl: '.next' }`. Obviously (if even possible within the application) one could generate unique classnames. A better solution would be to pass the HTML elements as these are already unique. **Is this possible somehow with React refs?**

My current hacky workaround:
```jsx
const MySwiper = () => {
  const navigationPrevRef = React.useRef(null)
  const navigationNextRef = React.useRef(null)

  return (
    <Swiper
      navigation={{
        // Both prevEl & nextEl are null at render so this does not work
        prevEl: navigationPrevRef.current,
        nextEl: navigationNextRef.current,
      }}
      onSwiper={(swiper) => {
        // Delay execution for the refs to be defined
        setTimeout(() => {
          // Override prevEl & nextEl now that refs are defined
          swiper.params.navigation.prevEl = navigationPrevRef.current
          swiper.params.navigation.nextEl = navigationNextRef.current

          // Re-init navigation
          swiper.navigation.destroy()
          swiper.navigation.init()
          swiper.navigation.update()
        })
      }}
    >
      <SwiperSlide>slide 1</SwiperSlide>
      <SwiperSlide>slide 2</SwiperSlide>
      <div ref={navigationPrevRef} />
      <div ref={navigationNextRef} />
    </Swiper>
  )
}
```

Thanks in advance!

[swiper/react] Custom navigation/pagination components using React refs not working/possible?

### Check that this is really a bug

- [X] I confirm

### Reproduction link

https://stackblitz.com/edit/nuxt-starter-y6fay4

### Bug description

Ther's a hydration issue with a very simple implementation of the swiper in nuxt 3. 
Check the console for the error 
```
[vue warn]: Hydration children mismatch in <swiper-container>: server rendered element contains more child nodes than client vdom. 
  at <App key=3 > 
  at <NuxtRoot>
```

and 

```
hydration completed but contains mismatches.
```

I know it's a framework specific error but imo it makes more sense to place it here. If I should post first in the nuxt issues, I will do that.

### Expected Behavior

_No response_

### Actual Behavior

_No response_

### Swiper version

9.2.4

### Platform/Target and Browser Versions

nuxt 3

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] 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

Nuxt3 Swiper hydration issue

@nolimits4web  can you please help us how to resolve the issue of using tab key on swiper slider. 
We have a slider shows 1 slide per view when we use tab key it tabs through all the slides (all slides have anchor tags) and then goes to the pagination part of slider which creates accessibility issue.

We need it to go through 1st slide then go to pagination if user uses enter key move to next slide(2) tab through 2nd slide and repeat same.

we have already added a11y module but it was not fixed.

WCAG issue for accessibility of slider

### Check that this is really a bug

- [X] I confirm

### Reproduction link

https://github.com/nolimits4web/swiper/blob/master/src/types/modules/mousewheel.d.ts#:~:text=export%20interface%20MousewheelOptions%20%7B

### Bug description


SwiperCore.use([Navigation, Keyboard, Mousewheel])


new Swiper(swiperRef.current as unknown as HTMLDivElement, {
      resizeObserver: true,
      slidesPerView: 'auto',
      spaceBetween: 20,
      simulateTouch: true,
      a11y: {
        prevSlideMessage: 'Previous slide',
        nextSlideMessage: 'Next slide',
      },
      keyboard: {
        enabled: true,
        onlyInViewport: false,
        pageUpDown: true,
      },
      mousewheel: {
        enabled: true,
      },
      grabCursor: true,
      centeredSlides: true,

      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    })

### Expected Behavior

types will correclty export mousewheel with enabled?: boolean

### Actual Behavior

 Type '{ enabled: true; }' is not assignable to type 'boolean | MousewheelOptions | undefined'.
  Object literal may only specify known properties, and 'enabled' does not exist in type 'MousewheelOptions'.


### Swiper version

8.0.7

### Platform/Target and Browser Versions

all

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] Make sure this is a Swiper issue and not a framework-specific issue

### Would you like to open a PR for this bug?

- [X] I'm willing to open a PR

Mouseweehl enabled, not correclty suported in types

### Check that this is really a bug

- [x] I confirm

### Reproduction link

https://codesandbox.io/s/swiper-default-forked-ssicx6?file=/index.html

### Bug description

I'm using thumbnails and a main slider. Clicking on last thumb item should just make itself and the respective main slider slide active.

I've tried searching on google, stack overflow and swiper docs for the solution.
I tried disabling click to center slide, disbaling a11y.

### Expected Behavior

If I click on any slide in thumb slider then it should be active on the main slider

### Actual Behavior

Clicking on the first 3 thumbs is properly working as expected but clicking on the last thumb slider is scrolling the thumb slide

### Swiper version

8.3.2

### Platform/Target and Browser Versions

Windows 10, Chrome 104.0.5112.102 

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] 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

stale

Clicking on last slide in thumb slider is scrolling the slider

### Discussed in https://github.com/nolimits4web/swiper/discussions/5776

<div type='discussions-op-text'>

<sup>Originally posted by **Sakkhor909** June  7, 2022</sup>
First of all, thank you for this amazing library.

Everything works fine until I use breakpoints
```
import { Swiper, SwiperSlide } from "swiper/react";
import Image from "next/image";

 <Swiper

        slidesPerView={1}

        breakpoints={{
          1024: {
            slidesPerView: 3,
          },
        }}
 
      >
        {Data.images.map((imgSrc, index) => {
          return (
            <SwiperSlide>
              <Image src={imgSrc} alt={Data.name + index} layout="fill" />
            </SwiperSlide>
          );
        })}
      </Swiper>
```

The error is shown on the next js page
```
Error: Hydration failed because the initial UI does not match what was rendered on the server.
```
</div>

Using breakpoints option in Next JS causes Hydration error

### Check that this is really a bug

- [X] I confirm

### Reproduction link

[not provided]

### Bug description

If I'm trying to import [additional modules as per the documentation](https://swiperjs.com/swiper-api#using-js-modules), the build of my Hugo webpage (which is using esbuild under the hood) is failing. I'd like to submit a codesandbox link, but for some reason, it won't let me login with my GitHub account.

This is the JavaScript snippet which I am using. It was working fine with v9.

```js
import Swiper, { Navigation, A11y } from "swiper";
new Swiper(".swiper", {
	loop: true,
	centeredSlides: true,
	slidesPerView: 1,
	initialSlide: initialSlide,
	navigation: {
		nextEl: ".swiper-button-next",
		prevEl: ".swiper-button-prev",
	},
	modules: [Navigation, A11y],
});
```


### Expected Behavior

The build should succeed.

### Actual Behavior

The following error appears in the logs.

> Error: error building site: JSBUILD: failed to transform "js/main.js" (text/javascript): "/Users/jasminoster/repos/gwdg-website-v2/assets/js/components/swiper.js:1:17": No matching export in "node_modules/swiper/swiper.mjs" for import "Navigation"

This error is correct, as the `swiper.mjs` is only exporting the `Swiper`, not any of the modules:

```js
/**
 * Swiper 10.0.3
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2023 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: July 3, 2023
 */

export { S as Swiper, S as default } from './shared/swiper-core.mjs';
```

### Swiper version

10.0.3

### Platform/Target and Browser Versions

macOS Ventura 13.4.1, Firefox 114.0.2

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] 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

Modules are not exported in `swiper.mjs`

### Check that this is really a bug

- [X] I confirm

### Reproduction link

https://codesandbox.io/p/sandbox/dreamy-benz-et8xf6?file=%2Fpages%2Findex.tsx&selection=%5B%7B%22endColumn%22%3A2%2C%22endLineNumber%22%3A9%2C%22startColumn%22%3A2%2C%22startLineNumber%22%3A9%7D%5D

### Bug description

Using ```<swiper-container>``` returns the error:

```Error: Hydration failed because the initial UI does not match what was rendered on the server.```

This error is from the dev console:
![image](https://user-images.githubusercontent.com/20581804/221857382-f2ce9d04-270f-4b38-a2f3-f1328a913093.png)
Refer to: https://nextjs.org/docs/messages/react-hydration-error

As seen in the example on codesandbox, there is no ```<span>``` element anywhere in the source code. But apparently, one ```<span>``` element is automatically added inside ```<swiper-container>``` when rendered.

![image](https://user-images.githubusercontent.com/20581804/221858216-0e99abab-1593-44d3-98c7-4c80f75b9a83.png)

Is there a way to disable this ```<span>``` element from being rendered or to change the element <span> to a different element just to avoid this issue?


### Expected Behavior

_No response_

### Actual Behavior

_No response_

### Swiper version

9.0.5

### Platform/Target and Browser Versions

macOS, Windows, Google Chrome 110.0.5481

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] 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

Getting "Hydration failed because the initial UI does not match what was rendered on the server" error when using Swiper Element on NextJs

### Check that this is really a bug

- [x] I confirm

### Reproduction link

missing demo

### Bug description

Hello. I cannot use codesendbox. I recorded a video with the problem. Please tell me how to solve it.

SwiperJS in Next 13 - "next": "13.4.7"

 ```
 return (
    <>
      <div className="relative">
        <Swiper
          slidesPerView={'auto'}
          
          centeredSlides={true}
          loop={true}

          speed={500}
          
          initialSlide={0}

          autoplay={{
            delay: 7000,
            disableOnInteraction: false,
            pauseOnMouseEnter: true,
            waitForTransition: true
          }}

          navigation={{
            nextEl:".swiper-next",
            prevEl:".swiper-prev",
          }}

          pagination={{
            el:".swiper-pagination",
            dynamicBullets: true,
            clickable: false,
          }}

          modules={[ Autoplay, Navigation, Pagination ]}
          
          className="mySwiper"
        >
          {swiper.map((item) => {
            return <SwiperSlide key='id'>
              <div className={item.bgSlide}>
                <div className="flex justify-between h-full">
                  <div className="pl-16 flex items-center text-white">
                    <div className="space-y-12">
                      <div className="space-y-4">
                        {item.heading && <h2 className="text-5xl font-bold">{item.heading}</h2>}
                        {item.text && <p>{item.text}</p>}
                      </div>
                      
                      <div className="space-y-2">
                        {item.buttonText && <Button button={item.buttonText} color='white' size="xl" flat={false} />}
                        {item.subText && <p className="text-sm">{item.subText}</p>}
                      </div>
                    </div>
                  </div>
                  <div className="flex justify-center items-center">
                    {item.imgSrc && <Image className="object-cover" src={item.imgSrc} width={640} height={640} alt={item.imgAlt} />}
                  </div>
                </div>
              </div>
            </SwiperSlide>
          })}

          <div className="container absolute inset-0 hidden md:flex items-center h-full">
            <div className="absolute left-0 inset-y-0 h-full z-10 flex items-center">
              <button className="swiper-prev swiper-navBtn">
                <ChevronLeftIcon
                  className="h-10 w-10 pr-0.5 bg-white text-light-primary rounded-lg duration-200 shadow-lg"
                  aria-hidden="true"
                />
              </button>
            </div>
            
            <div className="absolute right-0 inset-y-0 h-full z-10 flex items-center">
              <button className="swiper-next swiper-navBtn">
                <ChevronRightIcon
                  className="h-10 w-10 pr-0.5 bg-white text-light-primary rounded-lg duration-200 shadow-lg"
                  aria-hidden="true"
                />
              </button>
            </div>
          </div>

        </Swiper>

        <div className="swiper-pagination mb-4"></div>
      </div>
    </>
  )
```

### Expected Behavior

_No response_

### Actual Behavior

_No response_

### Swiper version

9.4.1

### Platform/Target and Browser Versions

macOS

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] 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

swiper-slide-prev does not load during a swipe 

### Clear and concise description of the problem

I love all of the accessibility features that come with Swiper but my snapshot tests are failing because of the dynamic id that is generated on the `swiper-wrapper` div when enabling `a11y`. The wrapper div is generated on the fly so I cannot control the markup in order to override the id manually. I would like to see an "id" as an option of `a11y`.


React Example:

```
const returnSlides = () => {
	return slides.map((slide) => (
		<SwiperSlide key={swiperSlideId}>
			...
		</SwiperSlide>
	));
};

<Swiper
	key={swiperId}
	grabCursor={true}
	slidesPerView={2.3}
	pagination={{ clickable: true }}
	navigation={true}
	scrollbar={true}
	mousewheel={false}
	spaceBetween={8}
	slidesOffsetBefore={16}
	slidesOffsetAfter={16}
	freeMode={true}
	freeModeMomentum={false}
	freeModeMomentumBounce={false}
	a11y={{ enabled: true }}
	breakpoints={{
		481: {
			slidesPerView: 'auto',
			spaceBetween: 16,
			slidesOffsetBefore: 32,
			slidesOffsetAfter: 32,
		},
	}}
>
	{returnSlides()}
</Swiper>
```

Screenshot of the DOM with dynamic wrapper and id

![image](https://user-images.githubusercontent.com/67278275/160426190-228c4629-ab9f-46f6-89e9-c9d04e22a327.png)


Screenshot of tests failing due to dynamic id

![image](https://user-images.githubusercontent.com/67278275/160429650-a313eae1-aff3-4714-bd77-7f6222c37df8.png)


### Suggested solution

Allow user to configure id to override dynamic id

```
a11y={
	{
		enabled: true,
		id: 'swiper-wrapper-id'
	}
}
```


### Alternative

_No response_

### Additional context

_No response_

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

### Would you like to open a PR for this feature?

- [x] I'm willing to open a PR

Add "id" as a configurable a11y option in order to pass snapshot tests

### Check that this is really a bug

- [X] I confirm

### Reproduction link

https://sendvid.com/2n22p5ns

### Bug description

When I click on a button that I have inside my slider, instead of executing what the button should do, what it does is take that slider to position 1 of the carousel. what I want is that this does not happen since it does not allow the action of the button to be executed, which is to open an overlay. I leave a video so that it is better understood.


### Expected Behavior

_No response_

### Actual Behavior

_No response_

### Swiper version

@8 cdn

### Platform/Target and Browser Versions

Chrome

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] 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

when I click on a button inside a slider, it brings that slider to the first position

- [ ] Core
- - [x] Swipe Left
- - [x] Swipe Right
- - [x] Active class added
- - [x] Prev & next classes added correctly
- - [x] `allowSlideNext`
- - [x] `allowSlidePrev`
- - [x] `allowTouchMove`
- - [x] `autoHeight`
- - [x] `allowSlideNext`
- - [x] `centeredSlides`
- - [x] `direction`
- - [x] `grabCursor`
- - [x] `initialSlide`
- - [x] `loop`
- - [x] `loopFillGroupWithBlank`
- - [x] `loopAdditionalSlides`
- - [ ] `loopPreventsSlide`
- - [ ] `loopedSlides`
- - [x] `slidesPerGroup`
- - [x] `slidesPerGroupSkip`
- - [x] `slidesPerView`
- - [x] `spaceBetween`
- - [x] `speed`
- - [x] `slideDuplicateNextClass`
- - [x] `slideDuplicatePrevClass`
- - [x] `slideNextClass`
- - [x] `slidePrevClass`
- - [x] `slideToClickedSlide`
- - [x] `slideVisibleClass`
- - [x] `slideActiveClass`
- - [x] `slideBlankClass`
- - [x] `slideDuplicateActiveClass`
- - [ ] `breakpoints`
- - [ ] `slideClass`
- - [ ] `slideDuplicateClass`
- - [ ] `centerInsufficientSlides`
- - [ ] `cssMode` - check basic functionality
- - [ ] `edgeSwipeDetection`
- - [ ] `edgeSwipeThreshold` - not sure how to check ?
- - [ ] `effect` Check all effects
- - [ ] `followFinger`
- - [ ] `freeMode` with all its options (will be extracted to module in v7)
- - [ ] `height`
- - [ ] `longSwipes` (+ options)
- - [ ] `nested`
- - [ ] `noSwiping`
- - [ ] `noSwipingClass`
- - [ ] `noSwipingSelector`
- - [ ] `normalizeSlideIndex`
- - [ ] `observeParents`
- - [ ] `observeSlideChildren`
- - [ ] `observer`
- - [ ] `on`
- - [ ] `passiveListeners`
- - [ ] `preloadImages`
- - [ ] `preventClicks`
- - [ ] `preventClicksPropagation`
- - [ ] `preventInteractionOnTransition`
- - [ ] `resistance`
- - [ ] `resistanceRatio`
- - [ ] `roundLengths`
- - [ ] `runCallbacksOnInit`
- - [ ] `setWrapperSize`
- - [ ] `shortSwipes`
- - [ ] `simulateTouch`
- - [ ] `slidesOffsetAfter`
- - [ ] `slidesOffsetBefore`
- - [x] `slidesPerColumn`
- - [x] `slidesPerColumnFill`
- - [ ] `swipeHandler`
- - [ ] `threshold`
- - [ ] `touchAngle`
- - [ ] `touchEventsTarget`
- - [ ] `touchMoveStopPropagation`
- - [ ] `touchRatio`
- - [ ] `touchReleaseOnEdges`
- - [ ] `touchStartForcePreventDefault`
- - [ ] `uniqueNavElements`
- - [ ] `updateOnImagesReady`
- - [ ] `updateOnWindowResize`
- - [ ] `url`
- - [ ] `userAgent`
- - [ ] `virtualTranslate`
- - [ ] `watchOverflow`
- - [ ] `watchSlidesProgress`
- - [ ] `watchSlidesVisibility`
- - [ ] `wrapperClass`
- - [ ] `onAny`
- - **Methods**
- - [x] `slideNext()`
- - [x] `slidePrev()`
- - [x] `slideTo()`
- - [x] `addSlide()`
- - [x] `appendSlide()`
- - [x] `prependSlide()`
- - [x] `removeAllSlides()`
- - [x] `removeSlide()`
- - [x] `setGrabCursor()`
- - [x] `unsetGrabCursor()`
- - [ ] `attachEvents()`
- - [ ] `changeDirection()`
- - [ ] `destroy()`
- - [ ] `detachEvents()`
- - [ ] `emit()`
- - [ ] `getBreakpoint()`
- - [ ] `getTranslate()`
- - [ ] `init()`
- - [ ] `off()`
- - [ ] `offAny()`
- - [ ] `on()`
- - [ ] `onAny()`
- - [ ] `once()`
- - [ ] `setTranslate()`
- - [ ] `slideToClosest()`
- - [ ] `slideToLoop()`
- - [ ] `translateTo()`
- - [ ] `update()`
- - [ ] `updateAutoHeight()`
- - [ ] `updateProgress()`
- - [ ] `updateSize()`
- - [ ] `updateSlides()`
- - [ ] `updateSlidesClasses()`
- - [ ] `extendDefaults()`
- - [ ] `use()` - ?
- - [ ] TODO: properties
- [ ] A11y
- - [x] add `role="group"` on slide
- - [x] `role="button"` should navigate on enter & space key press (pagination + navigation)
- - [x] add `aria-label` on slides
- - [x] add `aria-role-description="slide"` to swiper-container
- - [x] add `aria-role-description="slide"` to swiper-slide
- - [x] add `aria-live="polite"` to swiper-wrapper

TODO: add tasks to list

Tests

### Check that this is really a bug

- [X] I confirm

### Reproduction link

https://github.com/Takkuz/IssueReport-SwiperJS-A11y

### Bug description

Seems that swiperSlide directive doesn't bind correctly A11y properties.

Even adding different A11y label within configuration object they're not recognized.

### Expected Behavior

- Every slide page should have his own description;
- Pagination bullet should be selectables and clickable with proper values;
- Changing between content of pages should make a full slide 

### Actual Behavior

- Doesn't read slide page;
- Doesn't get on pagination bullet;
- Doesn't has a full slide with inline content (as you can see in the example provided) 

### Swiper version

8.2.4

### Platform/Target and Browser Versions

Android Chrome 102

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] 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

Angular

Wrong behaviour on Angular with A11y

### Check that this is really a bug

- [X] I confirm

### Reproduction link

https://twiagostage.adspirit.de/showadpreview.php?asc=1&url=pid%3D1553%26ord%3D%5Btimestamp%5D%26gdpr_consent%3D%5Bconsentstring%5D

### Bug description

Up until a couple of days everything was working fine. 
I had Slidesperview: 3 , autoplay: { delay: 2500, disableOnInteraction: false } and loop: true. 
Now it just doesnt work anymore. 
If i delete slidespierview, autoplay works again.

Im using swiper 9 through cdn 
my swiper looks like this:
 `var swiper = new Swiper(".swiper_container", {
        spaceBetween: 30,
        slidesPerView: 3,
        autoplay: { delay: 2500, disableOnInteraction: false },
        loop: true,
        on: {
          click: function () {
            const elem = this.clickedSlide;
            const label = elem.getAttribute("aria-label");
            const index = label.split("/")[0].trim();
            fP(index);
          },
        },
      });`

### Expected Behavior

It used to show 3 slides, autoplay and replicate the slides so basically it just keeps swiping

### Actual Behavior

Now i cant even swipe with the mouse, nor the autoplay works.

### Swiper version

9

### Platform/Target and Browser Versions

chrome

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] Make sure this is a Swiper issue and not a framework-specific issue

### Would you like to open a PR for this bug?

- [x] I'm willing to open a PR

autoplay with slidesperview not working

- Swiper Version: 6.4.15
- Platform/Target and Browser Versions: Debian+node15+chromium.

## What You Did


https://mmstudio.vercel.app/en-us/components/swiper#basic



## Expected Behavior

swiper should autoplay.

## Actual Behavior

do not play at all, even with prop

```
autoplay={{delay:100}}
```

autoplay doesn't work

### Check that this is really a bug

- [X] I confirm

### Reproduction link

/

### Bug description

![image](https://user-images.githubusercontent.com/76130749/191957934-d6aa911d-e6b4-41e8-9844-676a3f373a9e.png)



### Expected Behavior

Importing modules

### Actual Behavior

I try to use the latest swiper (V8.4.2) with nuxt 3 (V3.0.0-rc.11). When I try to import a module (e.g. Navigation), the error will pop up.

```vue
<template>
  <swiper
    :modules="[Navigation, A11y]"
    slides-per-view="1"
    :space-between="20"
    :breakpoints="{
      640: {
        slidesPerView: 2,
      },
      1280: {
        slidesPerView: 3,
      },
    }"
  >
    <swiper-slide v-for="index in 8" :key="index"> Slide {{ index }} </swiper-slide>
  </swiper>
</template>

<script setup>
// import Swiper core and required modules
import { Navigation, A11y } from "swiper";

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";

// Import Swiper styles
import "swiper/css";
import "swiper/css/navigation";
</script>
```

```json
{
  "private": true,
  "scripts": {
    "dev": "npx nuxi dev -o --https --ssl-cert localhost.pem --ssl-key localhost-key.pem",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxt/image-edge": "^1.0.0-27719579.87dcdf2",
    "@nuxtjs/tailwindcss": "^5.3.3",
    "@tailwindcss/forms": "^0.5.3",
    "nuxt": "3.0.0-rc.11",
    "sass": "^1.55.0",
    "sass-loader": "^13.0.2"
  },
  "dependencies": {
    "@storyblok/nuxt": "^4.3.0",
    "swiper": "^8.3.1"
  }
}
```

### Swiper version

8.4.2

### Platform/Target and Browser Versions

Windows, Chrome 105.0.5195.127

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] 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

[vite-node] [ERR_INVALID_URL_SCHEME] /node_modules/swiper/core/core.js

### Check that this is really a bug

- [X] I confirm

### Reproduction link

no reproduction link

### Bug description

I hope this description will show the problem I'm having difficulties to create a codesandbox.

In my vue project including the swiper (core, not vue) I have the problem getting an error message since v8.4.3 when clicking on a linked element in a slide:
`Uncaught TypeError: swiper.a11y is undefined in a11y.js:195`

I have to use the method `beforeDestroy()` to call `swiper.destroy(deleteInstance, cleanStyles)` with cleanStyles=`false`. But if the swiper is destroyed, `swiper.a11y.clicked` can't be set to `false`, because it is undefined after destruction.

As a workaround I am setting `swiper.a11y = {}` after calling `swiper.destroy(deleteInstance, cleanStyles)`.

I suggest adding a check if swiper.destroyed is not true in src/modules/a11y/a11y.js:

  ```
  const handlePointerUp = () => {
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        if (!swiper.destroyed)
        swiper.a11y.clicked = false;
      });
    });
  };
  ```

### Expected Behavior

No javascript error when swiper is destroyed after clicking a link within a slide.

### Actual Behavior

Receiving error message in console after clicking a link within a slide and destroying the swiper:
`Uncaught TypeError: swiper.a11y is undefined in a11y.js:195`

### Swiper version

8.4.3

### Platform/Target and Browser Versions

Windows Chrome 107

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] Make sure this is a Swiper issue and not a framework-specific issue

### Would you like to open a PR for this bug?

- [X] I'm willing to open a PR

JS error "swiper.a11y is undefined" when destroying swiper after click in slide

### Check that this is really a bug

- [X] I confirm

### Reproduction link

none

### Bug description

Choppy transitions between slides, but it depends upon the browser used.
Tested with effects : cube, coverflow, flip
Tested with browsers : all major browsers including Safari on IOS - latest versions

### Expected Behavior

Fluid swipe/transition between slides

### Actual Behavior

coverflow and cube effects are the most choppy
flip behaves a bit faster, but it is a simpler effect!

These browsers are very slow, sometimes unresponsive with cube or coverflow effect:
- Firefox
- Opera Mini

Choppy:
- Chrome
- Brave
- Opera

A bit more fluid:
- Kiwi
- Samsung Internet
- Safari on IOS

Maybe a clue: I noticed on my desktop under Linux, with Chrome and Firefox, that the CPU usage becomes a bit high when swiperjs is active : about 26% for the isolated process !!! My computer is a lot faster than any mobile device, so effects are fluid of course. But swiperjs consumes too much CPU to be honest.

Here is the configuration I used :

				  // Optional parameters
				  preloadImages: false,
				  lazy: { // lazysizes not enabled here so use swiperjs lazyload instead
				     enabled: true,
				     loadPrevNext: true,
				  },
		        speed: 1000,
				  loop: true,
				  grabCursor: false,
				  preventInteractionOnTransition: true, // strange interactions on iphone without that
				  effect: "coverflow",
		        coverflowEffect: {
		          rotate: 50,
		          stretch: 1,
		          depth: 100,
		          modifier: 1,
		          slideShadows: false,
		        },
		        autoplay: {
		          delay: 4000,
		          disableOnInteraction: false,
		        },
		        pagination: {
		          el: ".swiper-pagination",
		          clickable: true,
		        },
				  // Navigation arrows
				  navigation: {
				 	 nextEl: '.swiper-button-next',
				 	 prevEl: '.swiper-button-prev',
				  }

### Swiper version

latest v8

### Platform/Target and Browser Versions

android, ios, linux

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] 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

Choppy transitions between slides on mobiles

### Check that this is really a bug

- [X] I confirm

### Reproduction link

https://eu.daad.de/de/

### Bug description

Hey there, I have a strange problem with a swiper slide.

1. Open https://eu.daad.de/de/ - On the top of the page there is a swiper slider
2. Click on the last navigation bullet and navigate back with `TAB+SHIFT` until the focus reaches the slides and you navigated back at least 2 slides
3. Now navigate forward one slide with `TAB`

![](https://user-images.githubusercontent.com/8366071/190680991-a222feef-0b9c-45a2-88fd-c97e36739126.jpg)

I thought maybe it has to do something with the keyboard plugin. But it also happens when I disable this. I guess it's a problem with the A11y Plugin? Because if I remove this, back navigation via `TAB+SHIFT` is not enabled at all.

### Swiper Config

```js
import Swiper, { Navigation, Pagination, Autoplay, Keyboard, A11y } from 'swiper'

new Swiper(swiperContainer, {
    modules: [Navigation, Pagination, Autoplay, Keyboard, A11y],
    createElements: true,
    keyboard: { enabled: true },
    preventClicks: true,
    pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
        clickable: true,
    },
    navigation: {
        nextEl: '.swiper-next',
        prevEl: '.swiper-prev',
    },
    a11y: {
        enabled: true,
        firstSlideMessage: 'Das ist der erste Slide',
        lastSlideMessage: 'Das ist der letzte Slide',
        nextSlideMessage: 'Nächster Slide',
        paginationBulletMessage: 'Gehe zu Slide {{index}}',
        prevSlideMessage: 'Vorheriger Slide',
        containerRoleDescriptionMessage: containerRoleDescription || 'Wechselteaser',
        itemRoleDescriptionMessage: itemRoleDescription || 'Teaser',
    },
    observer: true,
    observeParents: true,
    watchOverflow: false,
    autoplay: autoplay ? {
        delay: 5000,
    } : false,
})
```

### Expected Behavior

If you have navigated back to slide 7 and tab forward, slide no. 8 should be centered

### Actual Behavior

Instead slide no. 8 is at the left side, its focus barely visible and slide no. 9 is centered. On top the bullet navigation is gone.

### Swiper version

8.0.7

### Platform/Target and Browser Versions

macOS Monterey 12.5.1; Chrome 105.0.5195.125

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] 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

Keyboard Back-Navigation is buggy

### Check that this is really a bug

- [X] I confirm

### Reproduction link

https://www.karriere.at/blog

### Bug description

We recently noticed a problem with the pagination dots of Swiper. When viewing the page https://www.karriere.at/blog on a mobile device, the slider dots in between the first and last dot don't work. I've already tried updating the Swiper NPM Package on our Stage (from 7.4.1 to 9.0.1), but to no avail.

Currently, our sliders get initialised like this (because we sometimes have more than one slider on a page). Even if I only initialise one slider on a page, the pagination dots don't work as expected.

```
  init(sliders) {
    sliders.forEach((slider) => {
      const sliderConfig = JSON.parse(slider.dataset.swiperConfig);
      const destroyBreakpoint = slider.dataset.swiperDestroyBreakpoint;

      let swiper;
      const initSwiper = () => {
        swiper = new Swiper(slider, {
          modules: [Navigation, A11y, Scrollbar, FreeMode, Keyboard, Pagination],
          ...sliderConfig,
        });
        swiper.init();
      };

      initSwiper();
    });
  }
```

### Expected Behavior

All pagination should work (i.e. are filled when the respective slide is selected).

### Actual Behavior

Only the first and last pagination dot work.

### Swiper version

7.4.1

### Platform/Target and Browser Versions

Chrome 109

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] 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

Pagination dots don't work correctly (only the first and last dot works)

### Check that this is really a bug

- [X] I confirm

### Reproduction link

https://codesandbox.io/s/swiper-default-react-forked-ukuwu9?file=/src/App.jsx

### Bug description

I created an example to show the problem.

With this configuration:

`loop={true}
        modules={[Navigation, EffectCoverflow, A11y, Pagination]}
        keyboard={false}
        centeredSlides
        navigation
        effect={"slide"}
        slideToClickedSlide
        pagination={{
          clickable: true
        }}
        slidesPerGroup={1}
        spaceBetween={10}
        slidesPerView={1.53}
        coverflowEffect={{
          rotate: 0,
          stretch: 80,
          depth: 200,
          modifier: 1,
          slideShadows: false
        }}`

 the isVisible property of swiperSlide hook return always false (there is the console.log).


There will be also super useful to have from this hook the "is the real active slide" property, because the property isActive is true for the slide and for all the duplicates.
Actually, the only way that I found was to search for className 'swiper-slide-active'

### Expected Behavior

isVisible works fine
there is a property that returns an unique and active and visible slide valorized with the slide that actually has 'swiper-slide-active' classname

### Actual Behavior

isVisible not working

### Swiper version

8.2.2

### Platform/Target and Browser Versions

all

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] 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

SwiperSlide is visible not working 

Hello I am using `swiper `in `nuxt.js` I tried to make some codes as I saw them in their documentation 

**my codes**

```
<template>
  <swiper
    :slides-per-view="3"
    :space-between="50"
    navigation
    :pagination="{ clickable: true }"
    :scrollbar="{ draggable: true }"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    ...
  </swiper>
</template>
<script>
// import Swiper core and required components
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper';

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';

// Import Swiper styles
import 'swiper/swiper.scss';
import 'swiper/components/navigation/navigation.scss';
import 'swiper/components/pagination/pagination.scss';
import 'swiper/components/scrollbar/scrollbar.scss';

// install Swiper components
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);

// Import Swiper styles
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  methods: {
    onSwiper(swiper) {
      console.log(swiper)
    },
    onSlideChange() {
      console.log('slide change')
    },
  },
};
</script>
```

**error in browser**

![image](https://user-images.githubusercontent.com/59558329/95452221-35936400-0969-11eb-87ab-aa033e51b369.png)

**warnings in terminal console**

![image](https://user-images.githubusercontent.com/59558329/95452289-52c83280-0969-11eb-9ee4-f1028713929c.png)



**my `package.json`**


![image](https://user-images.githubusercontent.com/59558329/95452349-68d5f300-0969-11eb-8d71-0c66f4535ba1.png)



render function or template not defined in component: Swiper in nuxt.js

### Check that this is really a bug

- [ ] I confirm

### Reproduction link

n/a

### Bug description

THIS IS NOT A BUG
I am just having a hard time trying to create a slider with a caption and counter at the bottom like the image ive attached


this is what i have coded so far, i was trying to utilize the renderCustom method but i dont think i am using it correctly

```
      <Swiper
        loop={false}
        className="border border-danger"
        navigation
        modules={[Navigation, Pagination, A11y]}
        pagination={{
          // el: '.jail-app-left-side-fractions',
          type: 'custom',
          clickable: true,
          // renderCustom(_, current, total) {
          //   return "<span className='h-full w-full border border-danger bg-black text-success flex justify-start'>now + ' of ' + total</span>"
          // },
        }}
        //   spaceBetween={50}
        onSlideChange={() => console.log('slide change')}
        onSwiper={(swiper) => console.log(swiper)}>
        {media?.map((slides: any) => {
          return (
            <SwiperSlide style={{ textAlign: 'center', fontSize: '18px', background: '#fff' }}>
              {slides.fields.image?.fields.file.url ? (
                <ContentfulImage
                  src={slides.fields.image?.fields.file.url}
                  alt={''}
                  className={clsx('object-cover w-full h-full')}
                />
              ) : (
                <VideoPlayer videoUrl={slides.fields.videoUrl} />
              )}
            </SwiperSlide>
          )
        })}
      </Swiper>
```

### Expected Behavior


### Actual Behavior

_No response_

### Swiper version

8.4.2

### Platform/Target and Browser Versions

macOS safari

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] 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

How can i make the counter with caption show underneath the slider 

### Check that this is really a bug

- [X] I confirm

### Reproduction link

https://codesandbox.io/s/swiper-navigation-forked-3uguc8?file=/index.html

### Bug description

It seems in Swiper 8.2.2 setting `slideLabelMessage: null,` crashes the slider and provides an error:

```
a11y.js:217 Uncaught TypeError: Cannot read properties of null (reading 'replace')
    at HTMLLIElement.eval (a11y.js:217:57)
    at eval (dom7.esm.js:774:14)
    at Dom7.forEach (<anonymous>)
    at Dom7.each (dom7.esm.js:773:8)
    at initSlides (a11y.js:214:19)
    at Swiper.eval (a11y.js:312:5)
    at eval (events-emitter.js:119:24)
    at Array.forEach (<anonymous>)
    at eval (events-emitter.js:118:37)
    at Array.forEach (<anonymous>)
```

Anyway, `aria-label` in slider slide elements should not be used anyway because aria-label overrides the visible text in those elements. This means that the screen-reader users only hear "1 / 24" and have no access to content.

My full code:

```js
import Swiper, {
  Navigation, Pagination, Scrollbar, A11y,
} from 'swiper/core';
import getLocalization from './localization';

Swiper.use([Navigation, Pagination, Scrollbar, A11y]);

const initCarousels = () => {
  // Init carousels
  const Carousels = document.querySelectorAll('.swiper-container');

  // Add skip links
  const allCarouselBlocks = document.querySelectorAll('.is-carousel');

  // Loop through all blocks
  for (let i = 0; i < allCarouselBlocks.length; i++) {
    // Get carousel block class nam (second, because first is 'block')
    const carouselClass = allCarouselBlocks[i].classList[1];

    if (typeof allCarouselBlocks[i].nextSibling !== 'undefined' || allCarouselBlocks[i].nextSibling !== null) {
      // Set ID to next block
      allCarouselBlocks[i].setAttribute('id', `anchor-${carouselClass}`);
    }
  }

  // init swipers
  for (let i = 0; i < Carousels.length; i++) {
    Carousels[i].classList.add(`swiper-container-${i}`);
    Carousels[i].querySelector('.swiper-button-prev').classList.add(`swiper-button-prev-${i}`);
    Carousels[i].querySelector('.swiper-button-next').classList.add(`swiper-button-next-${i}`);

    if (Carousels[i].querySelector('.swiper-pagination')) {
      Carousels[i].querySelector('.swiper-pagination').classList.add(`swiper-pagination-${i}`);
    }

    if (Carousels[i].querySelector('.swiper-scrollbar')) {
      Carousels[i].querySelector('.swiper-scrollbar').classList.add(`swiper-scrollbar-${i}`);
    }

    const swiper = new Swiper(`.swiper-container-${i}`, {
      slidesPerView: 1,
      slideClass: 'swiper-slide',
      wrapperClass: 'swiper-wrapper',
      centeredSlides: false,
      spaceBetween: 150,
      speed: 200,
      a11y: {
        enabled: true,
        lastSlideMessage: getLocalization('last_slide'),
        prevSlideMessage: getLocalization('previous_slide'),
        nextSlideMessage: getLocalization('next_slide'),
        slideLabelMessage: null,
        slideRole: 'group',
      },
      navigation: {
        prevEl: `.swiper-button-prev-${i}`,
        nextEl: `.swiper-button-next-${i}`,
      },
      pagination: {
        el: `.swiper-pagination-${i}`,
        type: 'fraction',
      },
      scrollbar: {
        el: `.swiper-scrollbar-${i}`,
        draggable: true,
      },
    });
  }
};

export default initCarousels;
```


### Expected Behavior

There should not be `aria-label` attribute in slide elements.

### Actual Behavior

Instead slider not working and error follows:

```
a11y.js:217 Uncaught TypeError: Cannot read properties of null (reading 'replace')
    at HTMLLIElement.eval (a11y.js:217:57)
    at eval (dom7.esm.js:774:14)
    at Dom7.forEach (<anonymous>)
    at Dom7.each (dom7.esm.js:773:8)
    at initSlides (a11y.js:214:19)
    at Swiper.eval (a11y.js:312:5)
    at eval (events-emitter.js:119:24)
    at Array.forEach (<anonymous>)
    at eval (events-emitter.js:118:37)
    at Array.forEach (<anonymous>)
```

### Swiper version

8.2.2

### Platform/Target and Browser Versions

macOS Chrome 102.0.5005.61 (Official Build) (x86_64)

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] 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

Accessibility: slideLabelMessage cannot be unset and should never be used

Hello, I have already posted on stackoverflow about rendering children in swiperjs using React.

https://stackoverflow.com/questions/66993033/swiper-js-for-react-does-not-render-children-properly
I use: 
```
"gatsby": "^3.0.1",
"react": "^17.0.1",
"swiper": "^6.5.0",
```

## What You Did

I want to render children like this: 
`<Swiper>{children}<Swiper/>`
But children are rendered after swiper wrapper.

## Expected Behavior

I want to pass all children and render them inside Swiper wrapper because I fetch data from external source (headless cms)

## Actual Behavior

Swiper Slides are rendered after Swiper component what makes cards invisible in page content.

The code you can see in stack overflow and this commit of my project
https://github.com/tobiaszciesielski/tciesielski.pl/pull/1/commits/5500865d7eef1a99facb03e3dedd987ee1ce6033


Children does not render properly (after wrapper component)

### Check that this is really a bug

- [X] I confirm

### Reproduction link

https://codesandbox.io/s/swiper-infinite-loop-vue-forked-vlfpw6?file=/src/App.vue

### Bug description

Steps to reproduce: 

1) Click on the `Prepend` or `Append` button
2) Check aria attributes are missed on newly added slides

It's even worse with `Shuffle` button - aria labels shuffled as well.

### Expected Behavior

Slides should have correct `aria-label`'s after `children` update

### Actual Behavior

Module respects only initially set aria attributes and doesn't react to changes.

Seems it's needed to expose A11y module on Swiper params the same way as Pagination/Navigation does and do extra check for it in https://github.com/nolimits4web/swiper/blob/master/src/vue/update-swiper.js and re-init the module if `children` changed.

Most likely it doesn't work correctly for other frameworks as well, but I have time/interest only for Vue version.
I can do PR for Vue version if bug is really accepted.

### Swiper version

8.1.4

### Platform/Target and Browser Versions

Not platform/browser specific

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] Make sure this is a Swiper issue and not a framework-specific issue

### Would you like to open a PR for this bug?

- [X] I'm willing to open a PR

Re-init A11y module when `children` changes

### Check that this is really a bug

- [X] I confirm

### Reproduction link

不需要地址

### Bug description

 <swiper @swiper="onswiper" :slidesPerView="1" :navigation="true" :loop="true" :autoplay="autoplayOptions"
                :pagination="{ clickable: true }" :modules="modules" @slideChange="slideChangePage">


//这里就是更新后的路径，以前是import { Swiper, SwiperSlide } from 'swiper/vue'
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue'
import { Pagination, A11y, Autoplay, Navigation } from 'swiper'
//这里就是更新后的路径，以前是import 'swiper/css'
import 'swiper/swiper.min.css'
import 'swiper/swiper.scss'
import 'swiper/swiper-bundle.css'
import 'swiper/swiper-bundle.min.css'
import 'swiper/swiper-vars.scss'


//自动轮播的配置
const autoplayOptions = {
    delay: 5000,
    disableOnInteraction:false
}

const onswiper = (e)=>{
    const swipe1  = e;
    console.log("onswiper==",swipe1);
}

const slideChangePage = (e)=>{
    console.log("slideChangePage==",e.activeIndex);
}

const modules = [Pagination, A11y, Autoplay, Navigation]

### Expected Behavior

<img width="1440" alt="截屏2022-09-03 上午9 49 09" src="https://user-images.githubusercontent.com/16474407/188251281-701df7e0-32ca-49a7-87d4-24029fe38359.png">


### Actual Behavior

想实时监听位置

### Swiper version

  "swiper": "^8.3.2",

### Platform/Target and Browser Versions

Chrome 版本 104.0.5112.101（正式版本） (x86_64)

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] Make sure this is a Swiper issue and not a framework-specific issue

### Would you like to open a PR for this bug?

- [X] I'm willing to open a PR

vue3 @slideChange 函数，获取activeIndex 位置不对，模块放了两个，打印有3个

### Check that this is really a bug

- [X] I confirm

### Reproduction link

https://codesandbox.io/s/clever-dew-7knd1n?file=/src/App.js

### Bug description

I'm trying to use swiper with SSR but the CSS making the following problem:

> ReferenceError: document is not defined


without swiper CSS the build succeeds but none of the swiper features are working...

here is my code:

```
import React from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'
import SwiperCore, { Navigation, Pagination, Mousewheel, Keyboard, Autoplay, Virtual, A11y } from 'swiper'

// swiper bundle styles
import 'swiper/swiper-bundle.min.css'

// swiper core styles
import 'swiper/swiper.min.css'

// modules styles
import 'swiper/components/navigation/navigation.min.css'
import 'swiper/components/pagination/pagination.min.css'

// install Swiper modules
SwiperCore.use([Navigation, Pagination, Mousewheel, Keyboard, Autoplay, Virtual, A11y])

const Carousel = ({ data, renderSlide }) => {
	return (
    <Swiper
      mousewheel
      keyboard
      className="mySwiper"
      slidesPerColumnFill="row"
      touchStartPreventDefault={false}
      watchOverflow
    >
      <div className="swiper-container">
        <SwiperSlide>
          <img src="https://www.imperial-library.info/sites/default/files/Fonts_Alphabets_Magic_Script.png" />{" "}
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://www.imperial-library.info/sites/default/files/Fonts_Alphabets_Magic_Script.png" />{" "}
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://www.imperial-library.info/sites/default/files/Fonts_Alphabets_Magic_Script.png" />{" "}
        </SwiperSlide>
      </div>
    </Swiper>
	)
}

export default Carousel
```

### Expected Behavior

_No response_

### Actual Behavior

_No response_

### Swiper version

6.8.4

### Platform/Target and Browser Versions

macOS m1

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] 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

when using ssr the css fails

### Check that this is really a bug

- [X] I confirm

### Reproduction link

https://jsfiddle.net/asefkow/2hxtguac/

### Bug description

The "next" button is rendered with

`<div class="swiper-button-next" tabindex="-1" role="button" aria-label="Next slide" aria-controls="swiper-wrapper-28cfe37a4e751be2" aria-disabled="true"></div>`

which is incorrect.  The `aria-disabled="true"` suggests a disabled button, when in fact the button is actually enabled.

### Expected Behavior

Either `aria-disabled="false"` or no attribute at all.

### Actual Behavior

aria-disabled="true"

### Swiper version

7.4.1

### Platform/Target and Browser Versions

macIS

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] 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

"Next" button has aria-disabled="true" even when the button is disabled (accessibility issue)

When watchOverflow is set, slidesOffsetAfter is set and slides with offset fits the screen than swiper is not locked.

https://github.com/nolimits4web/swiper/pull/3291#issuecomment-635500634

This is a:
* [x] bug
* [ ] enhancement
* [ ] feature-discussion (RFC)

* Swiper Version: 6.4.5 (current master)
* Platform/Target and Browser Versions: macOS + chrome (affects all platforms)

### What you did
- set watchOverflow to true
- set slidesOffsetAfter value
- keep only two slides to fit the screen
- issue: swiper is not locked

playground-react/App.jsx
```
/* eslint-disable no-restricted-globals */
import React from 'react';
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from '../build/core';
import { Swiper, SwiperSlide } from '../build/react';

SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);

const App = () => {
  return (
    <main>
      <Swiper
        watchOverflow
        slidesOffsetAfter={100}
        slidesPerView={3}
        spaceBetween={50}
        navigation
        scrollbar={{ draggable: true }}
      >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
      </Swiper>
    </main>
  );
};

export default App;
```

### Expected Behavior
Swiper is locked.

### Actual Behavior
Swiper is not locked.
![image](https://user-images.githubusercontent.com/17140919/104310479-152cf580-54d4-11eb-8f96-79dc5a9f0f1d.png)

watchOverflow doesn't lock swiper when slidesOffsetAfter is set and slidesOffsetBefore is not

This is my post regarding the issue on the StackOverflow:

https://stackoverflow.com/questions/61110557/swiper-js-enter-button-doesnt-do-anything-on-the-thumbnail-for-accessibility

and you can see the working example here:
https://codepen.io/asifkhanlush/pen/oNjvVpG

the summary is, on the thumbnail, when I click "enter" key from the keyboard, then it doesn't do anything. however, it should change the main gallery image.



This is a (multiple allowed):
* [x] bug
* [ ] enhancement
* [ ] feature-discussion (RFC)

* Swiper Version: EXACT RELEASE VERSION OR COMMIT HASH, HERE.
* Platform/Target and Browser Versions: PLATFORM CLIENT YOU ARE TARGETING SUCH AS macOS, Windows, CORDOVA, IOS, ANDROID, CHROME, ETC.
* Live Link or JSFiddle/Codepen or website with isssue: PREFERABLY _(IF YOU WANT YOUR ISSUE TO BE RESOLVED ASAP)_.

### What you did
EXPLAIN WHAT YOU DID, PREFERABLY WITH CODE EXAMPLES, HERE.

### Expected Behavior
EXPLAIN WHAT IS TO BE EXPECTED, HERE.

### Actual Behavior
EXPLAIN WHAT IS ACTUALLY HAPPENING, HERE.

P.S. Remember, an issue is not the place to ask questions. You can use [Stack Overflow](http://stackoverflow.com/questions/tagged/swiper)
for that.

Before you open an issue, please check if a similar issue already exists or has been closed before.

Enter button doesn't do anything on the thumbnail for accessibility

### Check that this is really a bug

- [X] I confirm

### Reproduction link

https://swiperjs.com/demos#navigation

### Bug description

Accessibility attributes for navigation buttons are invalid.

### Expected Behavior

_No response_

### Actual Behavior

Swiper Navigation Buttons:
```html
<div class="swiper-button-next" tabindex="0" role="button" aria-label="undefined" aria-controls="Next slide" aria-disabled="false"></div>
<div class="swiper-button-prev swiper-button-disabled" tabindex="-1" role="button" aria-label="undefined" aria-controls="Previous slide" aria-disabled="true"></div>
```
Attributes `aria-label` and `aria-controls` are invalid

### Swiper version

7.0.1

### Platform/Target and Browser Versions

All

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] 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

Accessibility attributes of navigation buttons have incorrect values

### Check that this is really a bug

- [X] I confirm

### Reproduction link

https://andrebato.com/films

### Bug description

I use SwiperJS as fullscreen slider for vertical scrolling.
When using the mouse-wheel, it nicely changes the slides.
But when using the touchpad on a Macbook, it jumps slides. 
I have a feeling, that it gets triggered many times, when you stay with your fingers on the touchpad.

`````
<Swiper
	modules={[Navigation, Mousewheel,Pagination, Scrollbar, A11y]}
	slidesPerView={1}
	spaceBetween={0}
	mousewheel="{true}" 
	pagination={{ clickable: true }}
	direction={"vertical"}
	speed= {350}
	parallax = "{true}"
	navigation={{
		nextEl: ".swiper-button-next",
		prevEl: ".swiper-button-prev",
	}}
	scrollbar={{ draggable: true }}
	bind:swiper={mySwiper}
	on:beforeTransitionStart={slideChange}
	on:reachBeginning={reachBeginning}
	on:reachEnd={reachEnd}
	>
	{#each sortedFilms as { data, slugs }, projectIndex}
		{#if data.thumbnail_vimeo[0]}
			<SwiperSlide>
				<a href="/films/{slugs[0]}" sveltekit:prefetch class="block item relative status-{status} previous-{previous} next-{next}">
						<video playsinline poster="{data.image.Big.url}" autoplay loop muted class="w-screen object-cover h-screen">
							<source src={data.thumbnail_vimeo[0].text} type="video/mp4" />
							Your browser does not support the video tag.
						</video>

						<div class="px-7 absolute bottom-6 z-20 text-5xl font-bold">
							{data.title[0].text}

							<br />

							{#if data.teaser[0]}
								{data.teaser[0].text}
							{/if}
						</div>
					</a>
				</SwiperSlide>
			{/if}
		{/each}
	</Swiper>
`````

### Expected Behavior

When using the touchpad on a Macbook, it jumps the slides multiple times.

### Actual Behavior

When using the touchpad on a Macbook, I would like to change the slide once and not multiply times.

### Swiper version

7.2.0

### Platform/Target and Browser Versions

macOS Chrome /Z Brave

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] 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

Svelte

Jumps slides when scrolling via touchpad

### Check that this is really a bug

- [X] I confirm

### Reproduction link

https://jsfiddle.net/asefkow/r2ve7xfs/

### Bug description

For accessibility reasons, we need to enable keyboard navigation on all swipers.  The keyboard module works well for this purpose.  However, when a page contains TWO swipers, then both respond to the same keyboard events.  The user's expectation is that only the "focused" swiper would be respond to the keyboard events.  The jsfiddle demonstrates the issue.

### Expected Behavior

Only the focused swiper should navigate in response to keyboard events

### Actual Behavior

Both swipers navigate in response to keyboard events

### Swiper version

7.3.0

### Platform/Target and Browser Versions

macOS

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] 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

Accessibility: unable to keyboard navigate just one swiper, when multiple are present

I set a project with NextJS, Tailwind CSS and Swiper JS.

When I run Yarn Dev I can successfully display my Swiper Slider without any error 

<img width="1245" alt="Capture d’écran 2021-05-27 à 22 41 54" src="https://user-images.githubusercontent.com/39828779/119894312-bde86880-bf3c-11eb-9a44-489f92dbb608.png">

However, once I built the project and run Start I am facing a broken slider with no navigation but I can still swipe but I get a blank 

<img width="448" alt="Capture d’écran 2021-05-27 à 22 44 25" src="https://user-images.githubusercontent.com/39828779/119894610-1a4b8800-bf3d-11eb-8db2-ec38696bc15f.png">

To reproduce just set a NextJS project with Tailwind config and Swiper slider. Create a file in pages folder with this samples code

```js 
`// import Swiper core and required modules
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
import Layout from '@modules/Layout'

import { Swiper, SwiperSlide } from 'swiper/react'

// install Swiper modules
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y])

const Slider = () => {
  return (
      <div className='container'>
        <Swiper
          spaceBetween={50}
          slidesPerView={1}
          navigation
          pagination={{ clickable: true }}
          onSwiper={(swiper) => console.log(swiper)}
          onSlideChange={() => console.log('slide change')}
        >
          <SwiperSlide>
            <div className='h-96 w-50 bg-red'>Slide 1</div>
          </SwiperSlide>
          <SwiperSlide>
            <div className='h-96 w-50 bg-blue'>Slide 2</div>
          </SwiperSlide>
          <SwiperSlide>
            <div className='h-96 w-50 bg-orange'>Slide 3</div>
          </SwiperSlide>
          <SwiperSlide>
            <div className='h-96 w-50 bg-green'>Slide 4</div>
          </SwiperSlide>
        </Swiper>
      </div>
  )
}

export default Slider

```


- Swiper Version: 6.5.6.
- Platform/Target and Browser Versions:   CHROME




Next JS Build + Tailwind CSS

### Check that this is really a bug

- [X] I confirm

### Reproduction link

https://swiperjs.com/demos#infinite-loop

### Bug description

If the loop option is set, the aria-label count all DOM elements including the duplicated. There are 5 elements, but 7 are counted by the duplicates. 

### Expected Behavior

If the loop option is set, the aria label may only be attached to the non-duplicated elements.  Only the elements that are not duplicated are counted.

### Actual Behavior

_No response_

### Swiper version

6.7.0

### Platform/Target and Browser Versions

Independent of platform/browser

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] Make sure this is a Swiper issue and not a framework-specific issue

### Would you like to open a PR for this bug?

- [X] I'm willing to open a PR

Count aria-label without duplicated item in loop option

### Check that this is really a bug

- [X] I confirm

### Reproduction link

https://andrejbezbirolo.tech/swipper-issue-demo/

### Bug description

When running a check on Google's Lighthouse, it removes 2 accessibility points claiming that inside the listing there is something more than the 'LI' tag. When disabling the swiper this error disappears.

### Expected Behavior

It is expected that when activating the swiper on a listing it does not create any elements inside the UL tag, so there are no accessibility conflicts.

### Actual Behavior

By activating the swiper on a listing, Google's Lighthouse claims that it is creating elements within UL that are not LI.

### Swiper version

6.7.5

### Platform/Target and Browser Versions

Windows, Opera GX, Google Chrome

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] 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

Swiper affects Lighthouse Accessibility


* [x] bug
* [ ] enhancement
* [ ] feature-discussion (RFC)

* Swiper Version: 6.3.4.
* Platform/Target and Browser Versions: macOS, chrome browser.

### Intro
Swiper js crashes when using breakpoints in production mode only (version 6.3.4). It only crashes when it hits a specified breakpoint. When I revert back to version 6.1.1 it works perfectly fine. Here is the configuration I used:

```
      <Swiper
        draggable={false}
        speed={150}
        spaceBetween={windowDimensions.width < config.TABLET_WIDTH ? 5 : 10}
        slidesOffsetBefore={
          windowDimensions.width < config.TABLET_WIDTH ? 16 : 0
        }
        slidesOffsetAfter={
          windowDimensions.width < config.TABLET_WIDTH ? 16 : 0
        }
        pagination={{ clickable: true }}
        navigation={windowDimensions.width < config.TABLET_WIDTH ? false : true}
        slidesPerView={4}
        breakpoints={{ 
          768: {
            slidesPerView: 4,
          },
          0: {
            slidesPerView: 3,
          },
        }}
      >
        {items.map((item, idx) => (
          <SwiperSlide key={idx} className='sliderContainer__item'>
            <img
              src={item.strDrinkThumb ? item.strDrinkThumb : item.img}
              alt='cocktail'
            />
            <p className='sliderContainer__itemTitle'>
              {item.strDrink ? item.strDrink : item.strIngredient}
            </p>
          </SwiperSlide>
        ))}
      </Swiper>
```

### Error screen shot
Again this is only happing in production mode. Here is a screenshot of the error (TypeError: Cannot read property 'split' of undefined):

![Screen Shot 2020-11-27 at 4 02 35 PM](https://user-images.githubusercontent.com/22378338/100484372-1fcd3000-30ca-11eb-957d-de08783f804d.png)



component: breakpoints

(React) Swiper crashes when using breakpoints, production mode only v6.3.4

Hi, it's possible to change the swiper-slide aria-label value? I need something like "1 of 5" instead of "1/5".  I didn't find anything in the documentation.
Thank you! Swiper is amazing!

Changing swiper-slide aria-label value

- Swiper Version: at least 6.4.12 to 6.5.0

There is a typo in "aria-role-description". The correct name of the attribute is "aria-roledescription".

Check https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Application_Role for reference.


Invalid aria-role-description

This is a (multiple allowed):
* [x] bug
* [ ] enhancement
* [ ] feature-discussion (RFC)

* Swiper Version: 6.3.0 and higher
* Platform/Target and Browser Versions: Independent of platform/browser

### What you did
Initializing the swiper, it works fine. The new a11y options for the slides can be set and they are shown in the DOM.
After destroying the swiper and initializing it again, everything works fine, except the a11y options for the slides. Looking deeper into the code, the array swiper.slides is empty in src/components/a11y/a11y.js:
```
    // Slide
    if (params.itemRoleDescriptionMessage) {
      swiper.a11y.addElRoleDescription($(swiper.slides), params.itemRoleDescriptionMessage);
    }
    swiper.a11y.addElRole($(swiper.slides), 'group');
    swiper.slides.each((slideEl) => {
      const $slideEl = $(slideEl);
      swiper.a11y.addElLabel($slideEl, `${$slideEl.index() + 1} / ${swiper.slides.length}`);
    });
```

This only happens after destroying the swiper using swiper.destroy() and initializing it again with swiper=newSwiper(...) with the same parameters without page reload. All a11y parameters work fine, only the ones for the slides are not applied because the slides are not there. It takes some milliseconds (works with tested timeout of 10 ms for 
```
swiper.a11y.addElRoleDescription($(swiper.slides), params.itemRoleDescriptionMessage);
```
).

Do you have an idea why this happens? Or even better an idea how to fix it?

Slides not ready after initializing swiper after destroying it

This is an issue carried over from the Jetpack project:

https://github.com/Automattic/jetpack/issues/14567

This is a (multiple allowed):
* [x] bug
* [ ] enhancement
* [ ] feature-discussion (RFC)

* Swiper Version: 4.5.1
* Platform/Target and Browser Versions: All Browsers
* Live Link or JSFiddle/Codepen or website with isssue: 
* Code in question: https://github.com/nolimits4web/swiper/blob/8d0dd34f87a48a497389f2cc8ed9503c0ba351b3/src/components/keyboard/keyboard.js#L53

### What you did

The Jetpack project uses Swiper as a gallery block for the Gutenberg project. It implements the keyboard shortcuts feature and we have had reports of accessibility concerns when using the "Page Up" and "Page Down" keys. 

For keyboard users, they are unable to get past the galleries and remains stuck inside the gallery.

### Expected Behavior

"Page Up" and "Page Down" to not be on the list of shortcuts OR for the list of shortcuts to be customisable. The other option would be to not loop to the start when using these keys.

### Actual Behavior

"Page Up" and "Page Down" are no longer working, making it harder to navigate the page via keyboard.


Page Up / Page Down captured by Swiper

### Check that this is really a bug

- [X] I confirm

### Reproduction link

https://codesandbox.io/s/swiper-notification-issue-s6v6y

### Bug description

When we use `button` as a navigation element instead of `div` so that we can press it with the space key, the content of `.swiper-notification` is never updated.

### Expected Behavior

_No response_

### Actual Behavior

_No response_

### Swiper version

6.7.5

### Platform/Target and Browser Versions

Any platforms with a keyboard

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] 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

`.swiper-notification` never updated with `button` navigations

- Swiper Version: EXACT RELEASE VERSION OR COMMIT HASH, HERE.
- Platform/Target and Browser Versions: PLATFORM CLIENT YOU ARE TARGETING SUCH AS macOS, Windows, CORDOVA, IOS, ANDROID, CHROME, ETC.

## What You Did

EXPLAIN WHAT YOU DID, PREFERABLY WITH CODE EXAMPLES, HERE.


 https://stackblitz.com/...



## Expected Behavior

I create a demo with swiper angular.
the actual slide content is images with alt description.
when I use voiceover, navigate to [prev] and [next] button, it suppose to read out the current image description.

## Actual Behavior
when I use voiceover, navigate to [prev] and [next] button, it does not read out the current image description.
I can see the aria-live, aria-controls attributes are all there correctly. But no aria-hidden for all the slides. not sure if it is the case. but I add the aria-hidden attribute on slidechange event, it still not work.

Screen reader do not read out the current slide image description

### Check that this is really a bug

- [X] I confirm

### Reproduction link

https://codesandbox.io/s/swiper-vue-default-forked-j5rqi?file=/src/Slider.vue

### Bug description

A Swiper component is used inside component "B".
Component "B" uses the navigation module and defines custom buttons by using assigning the corresponding class-names.
These custom buttons are not positioned inside the swiper-tag due to design purposes.
Component "A" is using component "B" multiple times.
The custom buttons in each created component "B" are controlling ALL created Swiper instances.

Assigning the corresponding aria-controls value "swiper-wrapper-xxxxxxxxxxxxxxxx" did not help.



### Expected Behavior

Each custom prev and next button should be bound to the corresponding Swiper instance.
At least an option to bind a custom button to a specific swiper instance directly, would help.

### Actual Behavior

_No response_

### Swiper version

swiper 6.7.5 @ vue 3.0.0

### Platform/Target and Browser Versions

Ubuntu 20.04

### Validations

- [X] Follow our [Code of Conduct](https://github.com/nolimits4web/swiper/blob/master/CODE_OF_CONDUCT.md)
- [X] Read the [docs](https://swiperjs.com/swiper-api).
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] 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

Assigning custom navigation buttons inside a component that uses the Swiper component results in the navigation elements controlling all swiper components

This is a:
* [x] bug
* [x] enhancement
* [ ] feature-discussion (RFC)

* Swiper Version: 5.3.8

### What you did
Enabled modules Pagination and Acessibility

### Expected Behavior
Bullets can be triggered by space key.

### Actual Behavior
Bullets cannot be triggered by space key (only by enter key).

### Related Documents:
https://www.w3.org/TR/wai-aria-practices/#button
https://www.w3.org/TR/wai-aria-practices/examples/button/button.html


role=button requires space to trigger action (accessibility)

When clicking on the navigation the slides are not moving as expected. See video on loom.
https://www.loom.com/share/2ae12567444f40d59fcea052ae165f9b

As you can see on the video, many clicks on the right arrow and only some of them trigger the slides to move. On the left arrow, it starts well but suddenly it becomes funny also.

I have nothing fancy going on. I am though, generating the final HTML with a shortcode on wordpress. I loop through the attributes and create each slide. I want to avoid past a bunch of code here. But if needed I edit the question

```
  const swiper = new Swiper(".swiper-container", {
    slidesPerView: 3,
    spaceBetween: 30,
    loop: true,
    navigation: {
      nextEl: ".slytbox-carousel__nav-right",
      prevEl: ".lytbox-carousel__nav-left",
    }
    
  });
```

This is the HTML markup after slide loaded.
```
<div class="lytbox-carousel__wrapper swiper-container swiper-container-initialized swiper-container-horizontal swiper-container-pointer-events">
                    
                    <div class="lytbox-carousel__main swiper-wrapper" id="swiper-wrapper-7297c0c69b8d448a" aria-live="polite" style="transition-duration: 0ms; transform: translate3d(-1933.33px, 0px, 0px);"><div class="lytbox-carousel__slide swiper-slide swiper-slide-duplicate swiper-slide-duplicate-active" data-swiper-slide-index="1" role="group" aria-label="1 / 10" style="width: 453.333px; margin-right: 30px;">
                        
                            <div class="lytbox-carousel__image" style="background-image:url(https://wordpress-513216-1810865.cloudwaysapps.com/wp-content/uploads/2021/04/Filler_Service_Image.jpg)"></div>
                            <div class="lytbox-carousel__info">
                                <a href=" /youtube ">
                                    <h4 class="lytbox-carousel__subheading"> The Youtube Chanel </h4>
                                 </a>
                                <h3 class="lytbox-carousel__heading"> Our Latest Videos </h3>
                                <p class="lytbox-carousel__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus illum quam quod reprehenderit possimus dolor ut. 
</p>
                            </div>
                       
                    </div><div class="lytbox-carousel__slide swiper-slide swiper-slide-duplicate swiper-slide-duplicate-next" data-swiper-slide-index="2" role="group" aria-label="2 / 10" style="width: 453.333px; margin-right: 30px;">
                        
                            <div class="lytbox-carousel__image" style="background-image:url(https://wordpress-513216-1810865.cloudwaysapps.com/wp-content/uploads/2021/04/Filler_Service_Image.jpg)"></div>
                            <div class="lytbox-carousel__info">
                                <a href=" /tools ">
                                    <h4 class="lytbox-carousel__subheading"> The Design Toolbox </h4>
                                 </a>
                                <h3 class="lytbox-carousel__heading"> Our Tools &amp; Resources </h3>
                                <p class="lytbox-carousel__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus illum quam quod reprehenderit possimus dolor ut.
</p>
                            </div>
                       
                    </div><div class="lytbox-carousel__slide swiper-slide swiper-slide-duplicate" data-swiper-slide-index="3" role="group" aria-label="3 / 10" style="width: 453.333px; margin-right: 30px;">
                        
                            <div class="lytbox-carousel__image" style="background-image:url(https://wordpress-513216-1810865.cloudwaysapps.com/wp-content/uploads/2021/04/Filler_Service_Image.jpg)"></div>
                            <div class="lytbox-carousel__info">
                                <a href=" /tools">
                                    <h4 class="lytbox-carousel__subheading"> The Design Toolbox </h4>
                                 </a>
                                <h3 class="lytbox-carousel__heading"> Our Tools &amp; Resources </h3>
                                <p class="lytbox-carousel__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus illum quam quod reprehenderit possimus dolor ut.</p>
                            </div>
                       
                    </div>
                            <div class="lytbox-carousel__slide swiper-slide swiper-slide-prev" data-swiper-slide-index="0" role="group" aria-label="4 / 10" style="width: 453.333px; margin-right: 30px;">
                        
                            <div class="lytbox-carousel__image" style="background-image:url(https://wordpress-513216-1810865.cloudwaysapps.com/wp-content/uploads/2021/04/Filler_Service_Image.jpg)"></div>
                            <div class="lytbox-carousel__info">
                                <a href="/blog ">
                                    <h4 class="lytbox-carousel__subheading"> The Blog</h4>
                                 </a>
                                <h3 class="lytbox-carousel__heading">our Latest Articles</h3>
                                <p class="lytbox-carousel__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus illum quam quod reprehenderit possimus dolor ut. </p>
                            </div>
                       
                    </div><div class="lytbox-carousel__slide swiper-slide swiper-slide-active" data-swiper-slide-index="1" role="group" aria-label="5 / 10" style="width: 453.333px; margin-right: 30px;">
                        
                            <div class="lytbox-carousel__image" style="background-image:url(https://wordpress-513216-1810865.cloudwaysapps.com/wp-content/uploads/2021/04/Filler_Service_Image.jpg)"></div>
                            <div class="lytbox-carousel__info">
                                <a href=" /youtube ">
                                    <h4 class="lytbox-carousel__subheading"> The Youtube Chanel </h4>
                                 </a>
                                <h3 class="lytbox-carousel__heading"> Our Latest Videos </h3>
                                <p class="lytbox-carousel__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus illum quam quod reprehenderit possimus dolor ut. 
</p>
                            </div>
                       
                    </div><div class="lytbox-carousel__slide swiper-slide swiper-slide-next" data-swiper-slide-index="2" role="group" aria-label="6 / 10" style="width: 453.333px; margin-right: 30px;">
                        
                            <div class="lytbox-carousel__image" style="background-image:url(https://wordpress-513216-1810865.cloudwaysapps.com/wp-content/uploads/2021/04/Filler_Service_Image.jpg)"></div>
                            <div class="lytbox-carousel__info">
                                <a href=" /tools ">
                                    <h4 class="lytbox-carousel__subheading"> The Design Toolbox </h4>
                                 </a>
                                <h3 class="lytbox-carousel__heading"> Our Tools &amp; Resources </h3>
                                <p class="lytbox-carousel__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus illum quam quod reprehenderit possimus dolor ut.
</p>
                            </div>
                       
                    </div><div class="lytbox-carousel__slide swiper-slide" data-swiper-slide-index="3" role="group" aria-label="7 / 10" style="width: 453.333px; margin-right: 30px;">
                        
                            <div class="lytbox-carousel__image" style="background-image:url(https://wordpress-513216-1810865.cloudwaysapps.com/wp-content/uploads/2021/04/Filler_Service_Image.jpg)"></div>
                            <div class="lytbox-carousel__info">
                                <a href=" /tools">
                                    <h4 class="lytbox-carousel__subheading"> The Design Toolbox </h4>
                                 </a>
                                <h3 class="lytbox-carousel__heading"> Our Tools &amp; Resources </h3>
                                <p class="lytbox-carousel__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus illum quam quod reprehenderit possimus dolor ut.</p>
                            </div>
                       
                    </div>
                    <div class="lytbox-carousel__slide swiper-slide swiper-slide-duplicate swiper-slide-duplicate-prev" data-swiper-slide-index="0" role="group" aria-label="8 / 10" style="width: 453.333px; margin-right: 30px;">
                        
                            <div class="lytbox-carousel__image" style="background-image:url(https://wordpress-513216-1810865.cloudwaysapps.com/wp-content/uploads/2021/04/Filler_Service_Image.jpg)"></div>
                            <div class="lytbox-carousel__info">
                                <a href="/blog ">
                                    <h4 class="lytbox-carousel__subheading"> The Blog</h4>
                                 </a>
                                <h3 class="lytbox-carousel__heading">our Latest Articles</h3>
                                <p class="lytbox-carousel__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus illum quam quod reprehenderit possimus dolor ut. </p>
                            </div>
                       
                    </div><div class="lytbox-carousel__slide swiper-slide swiper-slide-duplicate swiper-slide-duplicate-active" data-swiper-slide-index="1" role="group" aria-label="9 / 10" style="width: 453.333px; margin-right: 30px;">
                        
                            <div class="lytbox-carousel__image" style="background-image:url(https://wordpress-513216-1810865.cloudwaysapps.com/wp-content/uploads/2021/04/Filler_Service_Image.jpg)"></div>
                            <div class="lytbox-carousel__info">
                                <a href=" /youtube ">
                                    <h4 class="lytbox-carousel__subheading"> The Youtube Chanel </h4>
                                 </a>
                                <h3 class="lytbox-carousel__heading"> Our Latest Videos </h3>
                                <p class="lytbox-carousel__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus illum quam quod reprehenderit possimus dolor ut. 
</p>
                            </div>
                       
                    </div><div class="lytbox-carousel__slide swiper-slide swiper-slide-duplicate swiper-slide-duplicate-next" data-swiper-slide-index="2" role="group" aria-label="10 / 10" style="width: 453.333px; margin-right: 30px;">
                        
                            <div class="lytbox-carousel__image" style="background-image:url(https://wordpress-513216-1810865.cloudwaysapps.com/wp-content/uploads/2021/04/Filler_Service_Image.jpg)"></div>
                            <div class="lytbox-carousel__info">
                                <a href=" /tools ">
                                    <h4 class="lytbox-carousel__subheading"> The Design Toolbox </h4>
                                 </a>
                                <h3 class="lytbox-carousel__heading"> Our Tools &amp; Resources </h3>
                                <p class="lytbox-carousel__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus illum quam quod reprehenderit possimus dolor ut.
</p>
                            </div>
                       
                    </div></div>                

                    <div class="lytbox-carousel__nav">
                        <div class="lytbox-carousel__nav-left" tabindex="0" role="button" aria-label="Previous slide" aria-controls="swiper-wrapper-7297c0c69b8d448a">
                            <svg class="lytbox-carousel__nav-arrow">
                                <use href="https://wordpress-513216-1810865.cloudwaysapps.com/wp-content/mu-plugins/lytbox-carousel/dev/icons/arrow.svg#carousel_arrow"></use>
                            </svg>
                        </div>
                        <div class="lytbox-carousel__nav-right">
                            <svg class="lytbox-carousel__nav-arrow">
                                <use href="https://wordpress-513216-1810865.cloudwaysapps.com/wp-content/mu-plugins/lytbox-carousel/dev/icons/arrow.svg#carousel_arrow"></use>
                            </svg>
                        </div>
                    </div>

                <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>

```



Navigation have weird behaviour

- Swiper 6.5.0 / Angular 11.2.5
- Platform/Target and Browser Versions: Tested on Chrome/Ubuntu - Chrome/W10

My build prod version of my app does not show navigation and pagination anymore. - Work like a charm in dev build mode...
Didn't change anything, using ng build --prod as required....
I red about this issue : https://github.com/nolimits4web/swiper/issues/4326, but my build command did not change at all : node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build --prod --source-map

## What You Did

Worked like a charm yesterday... Did nothing, I know it is strange, but it is real...
Work great in local-dev env/build

Imported exactly as explain :
```
import {SwiperComponent} from 'swiper/angular';
import SwiperCore, {
  Navigation,
  Pagination,
  Keyboard,
  Scrollbar,
  A11y,
} from 'swiper/core';
//
// install Swiper modules
//
SwiperCore.use([Navigation, Pagination, Keyboard, Scrollbar, A11y]);
```

## Expected Behavior

Same behavior as in build dev...

## Actual Behavior

Build prod seems broken. :(

bug confirmed

Angular 11 - Swiper's Modules (Navigation/Pagination...) no more available in prod build ?

- Swiper Version: 6.4.11
- Platform/Target and Browser Versions: macOS, Windows

## What You Did
First off: Thx for making a vue version!
Issue: mousewheel and keyboard props have no effect on swiper.
I imported the modules as described in the offical guide, yet they don't work.

```
<script lang="ts">
  // Import Swiper Vue.js components
  import {
    Swiper,
    SwiperSlide,
    Keyboard,
    Mousewheel,
    A11y,
    HashNavigation,
  } from 'swiper/vue'
</script>

<template>
  <swiper
    direction="vertical"
    :slides-per-view="1"
    :space-between="50"
    :mousewheel="true"
    :keyboard="true"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
...
```


##  minimal reproduction of the issue
[vue-swiper-repo.zip](https://github.com/nolimits4web/swiper/files/5938886/vue-swiper-repo.zip)


## Expected Behavior
Keyboard, Mousewheel input enabled.

## Actual Behavior
Keyboard, Mousewheel input not working.


Vue: Swipper props: mousewheel, keyboard not working

I am trying to import Swiper.js components in Svelte, Sapper (https://swiperjs.com/svelte) but I am getting below error:

'update_slot' is not exported by node_modules\svelte\internal\index.mjs

Swiperjs version: 6.4.15

Code:

```
 <Swiper
    spaceBetween={50}
    slidesPerView={3}
    navigation
    pagination={{ clickable: true }}
    scrollbar={{ draggable: true }}
    on:slideChange={() => console.log('slide change')}
    on:swiper={(e) => console.log(e.detail[0])}
  >
    <SwiperSlide>Slide 1</SwiperSlide>
    <SwiperSlide>Slide 2</SwiperSlide>
    <SwiperSlide>Slide 3</SwiperSlide>
    <SwiperSlide>Slide 4</SwiperSlide>
    ...
  </Swiper>
  <script>
  // import Swiper core and required modules
  import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper';

  import { Swiper, SwiperSlide } from 'swiper/svelte';

  // Import Swiper styles
//   import 'swiper/swiper.scss';
//   import 'swiper/components/navigation/navigation.scss';
//   import 'swiper/components/pagination/pagination.scss';
//   import 'swiper/components/scrollbar/scrollbar.scss';
import "swiper/swiper-bundle.min.css"

  // install Swiper modules
  SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);

  </script>
```

 'update_slot' is not exported by node_modules\svelte\internal\index.mjs - Sapper, Swiperjs

This is a (multiple allowed):
* [ ] bug
* [x] enhancement
* [ ] feature-discussion (RFC)

* Swiper Version: 5.2.1
* Platform/Target and Browser Versions: all
* Live Link or JSFiddle/Codepen or website with isssue: -/-

### What you did
I used the renderBullet function of the Pagination component to create a fully custom pagination bullet. I also enabled the A11y component.

### Expected Behavior
SwiperJS takes the string that I return, sets active classes and that's it.

### Actual Behavior
SwiperJS does what I expected, but also adds attributes for tabindex, role and aria-label, because I have enabled the A11y component.
This is unexpected and not wanted, when I use renderBullet. We use semantically meaningful HTML and thus don't need the tabindex and role. Aria-label as a convention for us is a last resort, we aim to give meaning to buttons through hidden text content. 

### Suggested solution
When renderBullet function is used to create pagination bullets, A11y should not transform the bullets. 
Alternatively you could also set the A11y options more granular, so that you can enable/disable it for specific components (such as the Pagination component).



Don't use A11y when renderBullet is used

When slides with offset fits to the screen checkOverflow() sets swiper.isLocked, but mousewheel doesn't respect this lock.

This is a:
* [x] bug
* [ ] enhancement
* [ ] feature-discussion (RFC)

* Swiper Version: v6.4.5 (actual master)
* Platform/Target and Browser Versions: macOS + Chrome (affects all platforms)

### What you did
- set watchOverflow to true
- set slidesOffsetBefore to truthy value
- keep only two slides to fit the screen
- naviagiton arrows and scrollbar are correctly hidden
- issue: you can scroll with touchpad

playground-react/App.jsx
```
/* eslint-disable no-restricted-globals */
import React from 'react';
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y, Mousewheel } from '../build/core';
import { Swiper, SwiperSlide } from '../build/react';

SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Mousewheel]);

const App = () => {
  return (
    <main>
      <Swiper
        watchOverflow
        slidesOffsetBefore={100}
        onSwiper={(swiper) => (window.swiper = swiper)}
        slidesPerView={3}
        spaceBetween={50}
        navigation
        scrollbar={{ draggable: true }}
        mousewheel={true}
      >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
      </Swiper>
    </main>
  );
};

export default App;
```

### Expected Behavior
Swipe with touchpad is locked.

### Actual Behavior
Swipe is available.

Mousewheel swipe doesn't respect swiper.isLocked when watchOverflow + slidesOffsetBefore are set and it fits the screen

We need a smaller version of core swiper, as still current core version may contains a lot of functionality that doesn't required for everyone.

List if settings/features (wip) to be potentially removed from core and moved to installable modules:
- `freeMode` - a huge chunk in code in `onTouchEnd` handler related to `freeMode`
- `slidesPerColumn`
- `loop`
- `components/core/manipulation` - `appendSlide`/`prependSlide` and other methods which are totally not needed when used with Angular/React/Vue/Svelte components as manipulation should be done there by means of framework anyway

In addition with need a "lite" version of Swiper that will have Core + most used modules like:
- navigation
- pagination
- lazy
- a11y
- autoplay

cc @vltansky 

RFC: Swiper Lite and smaller Core

* [x] bug

* Swiper Version: 6.4
* Platform/Target and Browser Versions: Any

### What you did
```javascript
// app.js
import { A11y, Navigation, Swiper } from 'swiper';

Swiper.use([A11y, Navigation]);

new Swiper('.swiper-container', {
  a11y: {
    enabled: true,
    notificationClass: 'swiper-notification',
    prevSlideMessage: 'Previous slide',
    nextSlideMessage: 'Next slide',
    firstSlideMessage: 'This is the first slide',
    lastSlideMessage: 'This is the last slide',
    paginationBulletMessage: 'Go to slide {{index}}',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});
```
```html
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
</head>

<body>
  
  <div class="swiper-container">
    
    <div class="swiper-wrapper">
      
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </div>

    
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>

  <script src="app.js"></script>
</body>
</html>
```

### Expected Behavior
All A11y attributes to be set.
```html
<div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide" aria-disabled="false"></div>
```

### Actual Behavior
No A11y attributes set.
```html
<div class="swiper-button-next"></div>
```

Aria disabled and tabindex is set upon clicking next/prev.
```html
<div class="swiper-button-prev" aria-disabled="false" tabindex="0"></div>
```

This behavior only happens when you are using ES modules.

A11y not working when using ES modules

This is a (multiple allowed):
* [x] bug
* [ ] enhancement
* [ ] feature-discussion (RFC)

* Swiper Version: 6.3.5.
* Platform/Target and Browser Versions: Chrome, safari, edge etc (all modern browsers + mobile browsers).
* Live Link or JSFiddle/Codepen or website with isssue:
https://bouclesandwaves-p67ctnmpb.vercel.app

### What you did
I'm using REACT version of swiper. When you load the page it all works perfectly. This is how i coded it:
```` js
import React from 'react';
import SwiperCore, {Navigation, Pagination, A11y, Autoplay} from 'swiper';
import {Swiper, SwiperSlide} from "swiper/react";

import styles from './Slideshow.module.scss';

SwiperCore.use([Navigation, Pagination, A11y, Autoplay]);
const Slideshow = ({images = [], intervalMs = 1000}) => {
    return <div className={styles.slideshow}>
        <Swiper
            slidesPerView={1}
            navigation
            pagination={{clickable: true}}
            loop
            autoplay={{delay: intervalMs}}
        >
            {
                images.map(src => <SwiperSlide key={src}><img className={'banner-img'} src={src}
                                                              alt={'banner'}/></SwiperSlide>)
            }
        </Swiper>
    </div>;
};

export default Slideshow;
````

Now the bug only happens in a particular case. First of all I am using server-side rendering using https://vercel.com/. 
When you go to the login page: https://bouclesandwaves-p67ctnmpb.vercel.app/login
and login, you can use test account:
test@test.com
password: test

Then it redirects to the home page, then it is perfectly fine. Then you log out (press user icon in right upper corner -> log out) and then log in again with the credentials, then the images will be huge: 
![image](https://user-images.githubusercontent.com/11407553/98169773-2b736f80-1eed-11eb-983e-b3e409426b6a.png)

These are the extra styles I already put on the swiper:
``` css
.swiper-container {
  width: 100%;
  height: auto;
  max-height: 100%;
  .swiper-wrapper {
    align-items: center;
    img {
      width: 100%;
    }

    .swiper-slide {
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
  }
}
```

Note that when I run the project locally, then I dont have any issue, so I think it has to do something with the server-side rendering.




### Expected Behavior
That the width and hight is always consistent

### Actual Behavior
The width and height is only correct the first time its loaded, afterwards it is huge.

has demo

Swiper sometimes huge when used on server side rendering

- Swiper Version: 6
- Platform/Target and Browser Versions:  Windows, VSCode.

## What You Did
Magic_swiper.vue
<template>
    <swiper
    :slides-per-view="3"
    :space-between="50"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
// import Swiper core and required modules
import SwiperCore, { Autoplay, Navigation, Pagination, Scrollbar, A11y } from 'swiper'
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue'

// Import Swiper styles
import 'swiper/swiper.scss'
SwiperCore.use([Autoplay, Navigation, Pagination])

export default defineComponent({
  name: 'Magic_swiper',
  props: {
    msg: String
  },
  components: {
    Swiper,
    SwiperSlide
  }
})
// 魔方家居图片轮播组件
</script>


 https://codesandbox.io/...



## Expected Behavior

EXPLAIN WHAT IS TO BE EXPECTED, HERE.

## Actual Behavior

EXPLAIN WHAT IS ACTUALLY HAPPENING, HERE.

Could not find a declaration file for module 'swiper/vue'

- Swiper Version: 6.5.8
- Platform/Target and Browser Versions: Next

## What You Did

I've imported React as the docs say with:

```js
import { Swiper } from 'swiper/react';
import SwiperCore, { Keyboard, A11y, Pagination } from 'swiper';
```

Upon trying to build this with Next and/or loading the site I get:

```
> Build error occurred
/Users/alaguna/Projects/project/node_modules/swiper/swiper-react.esm.js:13
import { Swiper } from './esm/react/swiper';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:979:16)
    at Module._compile (internal/modules/cjs/loader.js:1027:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.ft6N (/Users/alaguna/Projects/project/.next/server/pages/[teamslug]/schedule.js:8621:18)
    at __webpack_require__ (/Users/alaguna/Projects/project/.next/server/pages/[teamslug]/schedule.js:23:31)
    at Module.nWF6 (/Users/alaguna/Projects/project/.next/server/pages/[teamslug]/schedule.js:11399:25) {
  type: 'SyntaxError'
}
info  - Collecting page data .%
```

## Expected Behavior

It should not blow.

## Actual Behavior

It does blow.

--- 

I acknowledge this is probably something in my config but I can't find anything odd:

<details>
  <summary>next.js.config file</summary>
  
```js
const envConfig = require('dotenv').config();
const path = require('path');

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

// import next constants
const CONSTANTS = require('./next.constants');

// import version from package.json
const { version } = require('./package.json');

// set build specific constants
const env = CONSTANTS[process.env.BUILD_ENV] || CONSTANTS.local;

env.BUILD_VERSION = version;

// override any values set in the constant
// file with values from .env
if (envConfig && envConfig.parsed) {
  Object.entries(envConfig.parsed).forEach((entry) => {
  // eslint-disable-next-line prefer-const
    let [key, val] = entry;

    // dotenv creates all values as strings
    // so cast these values into booleans
    if (val === 'false') {
    // cast false values
      val = false;
    } else if (val === 'true') {
    // cast true values
      val = true;
    } else if (val === 'null') {
    // cast null values
      val = null;
    } else if (/^[\d.]+$/.test(val)) {
    // cast numbery looking values
      val = +val;
    }

    // update the env object which is set
    // from next.constants.js
    env[key] = val;
  });
}

const config = {
  poweredByHeader: false,
  target: 'server',
  compress: false,
  webpack(cfg, { isServer }) {
    const originalEntry = cfg.entry;
    cfg.entry = async () => {
      const entries = await originalEntry();

      if (entries['main.js'] && !entries['main.js'].includes('./src/client/polyfills.js')) {
        entries['main.js'].unshift('./src/client/polyfills.js');
      }

      return entries;
    };
    cfg.module.rules.push({
      test: /\.js/,
      use: [{
        loader: 'string-replace-loader',
        options: {
          // eslint-disable-next-line no-template-curly-in-string
          search: "(`/_next/data/${this.buildId}${dataRoute}${ssg?'':search}`)",
          // eslint-disable-next-line no-template-curly-in-string
          replace: "(`/_pages/_next/data/${this.buildId}${dataRoute}${ssg?'':search}`)",
        },
      }],
    });
    if (!isServer) {
      cfg.module.rules.push({
        test: [
          path.resolve(__dirname, 'src/api/cms-schemas.js'),
          path.resolve(__dirname, 'src/api/fetchWithTimeout.js'),
          path.resolve(__dirname, 'src/api/stats-json.js'),
          path.resolve(__dirname, 'src/constants/settings.js'),
          path.resolve(__dirname, 'src/constants/navigation-menus.js'),
          path.resolve(__dirname, 'next.constants.js'),
          /src\/api\/logger\/.+/,
          /src\/api\/mock\/.+/,
        ],
        use: 'null-loader',
      });
    }
    return cfg;
  },
  env,
};

module.exports = withBundleAnalyzer(config);
```
</details>

Next: SyntaxError: Cannot use import statement outside a module

This is a:
* [x] bug
* [ ] enhancement
* [ ] feature-discussion (RFC)

* Swiper Version: swiper@6.0.1.

* Live Link or JSFiddle/Codepen or website with isssue: PREFERABLY _(IF YOU WANT YOUR ISSUE TO BE RESOLVED ASAP)_.

### What you did
I set navigation property 
`<Swiper navigation={{
    navigation: {
        nextEl:  (<div className='next'></div>),
        prevEl:  (<div className='next'></div>)
    }}>
...  </Swiper>`

### Expected Behavior
I want to see my own navigation buttons

### Actual Behavior
The navigation isn't there, nither the original. It's like "navigation: false".

Thanks in advance

Swiper React custom navigation components

Most modern mobile touch slider and framework with hardware accelerated transitions

swiper

146 GitHub issues

Open issues

Links