// 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