Skip to content

Instantly share code, notes, and snippets.

@vanaf1979

vanaf1979/reduced=motion-swiper.js Secret

Last active Aug 30, 2020
Embed
What would you like to do?
// The default settings
const swiperSettings = {
loop: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
pagination: {
el: ".swiper-pagination"
}
};
// Grab a reference to the media query.
const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
// if the user asked for no anmiations:
if (!mediaQuery || mediaQuery.matches) {
swiperSettings.effect = "fade";
swiperSettings.speed = 0;
swiperSettings.autoplay = false;
} else {
swiperSettings.effect = "slide";
swiperSettings.speed = 300;
swiperSettings.autoplay = { delay: 2500 };
}
// Initialize the slider with the correct settings
let swiper = new Swiper(".swiper-container", swiperSettings);
// Listen for changes in the media query.
mediaQuery.addEventListener("change", () => {
// Unset the slider instance.
swiper.destroy();
// if the user asked for no anmiations.
if (mediaQuery.matches) {
swiperSettings.effect = "fade";
swiperSettings.speed = 0;
swiperSettings.autoplay = false;
} else {
swiperSettings.effect = "slide";
swiperSettings.speed = 300;
swiperSettings.autoplay = { delay: 2500 };
}
// re-initialize the slider with the correct settings.
swiper = new Swiper(".swiper-container", swiperSettings);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.