/reduced=motion-swiper.js Secret
Last active
August 11, 2021 07:52
Star
You must be signed in to star a gist
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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