Skip to content

Does this library support reduced motion? #7912

Closed Answered by edwin-shdw
IDrumsey asked this question in Q&A
Discussion options

You must be logged in to vote

Seems like Swiper doesn’t handle this automatically, but you can easily implement it yourself:

function usesReducedMotion() {
  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
}

new Swiper(".swiper", {
  speed: usesReducedMotion() ? 0 : 300,
  effect: usesReducedMotion() ? 'fade' : 'slide',
});

Setting speed to 0 removes transition animations and using the fade effect instead of slide prevents unnecessary motion when dragging.

However, I think it should respect the reduced motion setting by default. At least it wouldn't harm anyone.
I would like to implement this if you're cool with the idea @nolimits4web

Replies: 1 comment 1 reply

Comment options

You must be logged in to vote
1 reply
@IDrumsey
Comment options

Answer selected by IDrumsey
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet
2 participants