How can I have multiple SwiperJS instances on the same page with different settings?-CodePudding

I have multiple SwiperJS sliders on a page, and each has a different autoplay speed. However, currently all sliders work, but inherit the autoplay speed form the last slider on the page. How can I ensure they use thier own 'speed' setting, which is set as a data attr?

var speed = $(this).data("speed");

new Swiper(".swiper", {
  modules: [Autoplay],
  loop: true,
  autoplay: {
    delay: speed, // Uses the speed date from last slider on page, not unique
    disableOnInteraction: false,
  },
});

CodePudding user response：

Most such libraries allow you to use a function to retrieve and set property values.

autoplay: {
  delay: () => {
    return this.el.getAttribute('data-speed');
  },
  disableOnInteraction: false,
},

Swiper provides element selectors for the container (el):

Dom7 element with slider container HTML element. To get vanilla HTMLElement use swiper.el