swiper
swiper copied to clipboard
Keyboard Back-Navigation is buggy
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.
- Open https://eu.daad.de/de/ - On the top of the page there is a swiper slider
- 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 - Now navigate forward one slide with
TAB
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
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
- [X] Read the docs.
- [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