Home>

I'm creating a slider using swiper.js
https://swiperjs.com/
When installing multiple sliders on the same page

var mySwiper = new Swiper ('. swiper-container1', {
  loop: true,
  autoplay: {
    delay: 5000,
    disableOnInteraction: false
  },
  slidesPerView: 1,
  spaceBetween: 10,
  centeredSlides: true,
  pagination: {
    el: '.swiper-pagination1',
  }
});
var mySwiper = new Swiper ('. swiper-container2', {
  loop: true,
  autoplay: {
    delay: 5000,
    disableOnInteraction: false
  },
  slidesPerView: 1,
  spaceBetween: 10,
  centeredSlides: true,
  pagination: {
    el: '.swiper-pagination2',
  }
});
var mySwiper = new Swiper ('. swiper-container3', {
  loop: true,
  autoplay: {
    delay: 5000,
    disableOnInteraction: false
  },
  slidesPerView: 1,
  spaceBetween: 10,
  centeredSlides: true,
  pagination: {
    el: '.swiper-pagination3',
  }
});


I used the same thing over and over again.

You can use this method for up to two or three,
It will be troublesome if it increases more.

I tried to create an iterative process and did the following but it didn't respond

for (var i = 0;i<5;i ++) {
  var mySwiper = new Swiper ('. gate-swiper [i]', {
    loop: true,
    autoplay: {
      delay: 5000,
      disableOnInteraction: false
    },
    slidesPerView: 1,
    spaceBetween: 10,
    centeredSlides: true,
    pagination: {
      el: '.sp-num [i]',
    }
  });
}


First of all, I don't know if swiper can't use it repeatedly or write it wrongly.
I want advice.

  • Answer # 1

    Would you like to be helpful here?

    At least how to write is different.

    for (var i = 0;i<5;i ++) {
      var mySwiper = new Swiper ('. gate-swiper' + i, {
        loop: true,
        autoplay: {
          delay: 5000,
          disableOnInteraction: false
        },
        slidesPerView: 1,
        spaceBetween: 10,
        centeredSlides: true,
        pagination: {
          el: '.sp-num' + i,
        }
      });
    }

Related articles

Trends