javascript - Swiper slider : how to initialize it on multiple dynamic instances but named

Question

我想初始化多个 Swiper 实例。

我找到了一个基于 jQuery .each() 的解决方案这里:

iDangero.us Swiper multiple instances

但是使用这段代码我不能使用 Swiper 的方法，因为我不能写这样的东西 mySwiper.update();
我的代码如下:

$('.results-tab-slider').each(function() {
  new Swiper($(this), {
    slidesPerView: 2,
    spaceBetween: 70,
    loop: true,
    breakpoints: {
      767: {
        slidesPerView: 1
      },
      1024: {
        slidesPerView: 2
      },
      1270: {
        slidesPerView: 1
      }
    },
    navigation: {
      prevEl: $(this).siblings('.results-tab-button-prev'),
      nextEl: $(this).siblings('.results-tab-button-next'),
    }
  });
});

正如我所说，我想重写代码，我可以使用这样的实例 mySwiper.update();最重要的是我不知道生成了多少 slider 。

Answer 1

在 DOM 中添加您想要的 Swiper 数量。确保他们每个人都有不同的 ID。

<div id="swiper-a" class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
</div>

<div id="swiper-b" class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
</div>

然后在你的 JS 中:

 var thisSwiper = [];
 $('.swiper-container').each(function(i) {
   var this_ID = $(this).attr('id');

   thisSwiper[i] = new Swiper('#'+this_ID, {
     loop: true,
     direction: 'vertical'
   });

   thisSwiper[i].on('slideChange', function () {
     console.log('slide '+i+' changed');
   });
 });