reduced=motion-swiper.js

// 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);
});