Question

我想初始化多个Swiper实例。

我在这里找到了基于jQuery .each()的解决方案：

但是使用此代码，我无法使用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(); 最重要的是，我不知道生成了多少滑块。

Answer 1

添加您要在DOM中添加多少个Swipers。确保它们每个都有不同的ID。

> df
   Indiv MN1 MN2 MN3 MN4 MN5 MN6 MN7 MN8
1      1   A   C   C   A   C   G   A   T
2      2   A   C   T   A   T   A   A   T
3      3   A   C   T   G   C   A   A   C
4      4   A   C   T   G   C   G   G   C
5      5   A   T   C   G   C   A   A   C
6      6   A   T   C   G   C   A   G   C
7      7   A   T   T   A   T   A   A   T
8      8   A   T   T   A   T   A   G   T
9      9   A   T   T   A   T   G   G   C
10    10   G   C   C   A   C   A   A   C
11    11   G   C   C   A   C   G   A   T
12    12   G   C   C   G   C   G   G   T
13    13   G   C   C   G   T   G   G   T
14    14   G   C   T   G   C   G   A   T
15    15   G   C   T   G   T   A   G   C
16    16   G   T   C   A   T   A   G   T
17    17   G   T   C   G   T   A   A   C
18    18   G   T   T   A   C   G   G   T
19    19   G   T   T   G   T   G   G   T

> dput(df)
structure(list(Indiv = 1:19, MN1 = c("A", "A", "A", "A", "A", 
"A", "A", "A", "A", "G", "G", "G", "G", "G", "G", "G", "G", "G", 
"G"), MN2 = c("C", "C", "C", "C", "T", "T", "T", "T", "T", "C", 
"C", "C", "C", "C", "C", "T", "T", "T", "T"), MN3 = c("C", "T", 
"T", "T", "C", "C", "T", "T", "T", "C", "C", "C", "C", "T", "T", 
"C", "C", "T", "T"), MN4 = c("A", "A", "G", "G", "G", "G", "A", 
"A", "A", "A", "A", "G", "G", "G", "G", "A", "G", "A", "G"), 
    MN5 = c("C", "T", "C", "C", "C", "C", "T", "T", "T", "C", 
    "C", "C", "T", "C", "T", "T", "T", "C", "T"), MN6 = c("G", 
    "A", "A", "G", "A", "A", "A", "A", "G", "A", "G", "G", "G", 
    "G", "A", "A", "A", "G", "G"), MN7 = c("A", "A", "A", "G", 
    "A", "G", "A", "G", "G", "A", "A", "G", "G", "A", "G", "G", 
    "A", "G", "G"), MN8 = c("T", "T", "C", "C", "C", "C", "T", 
    "T", "C", "C", "T", "T", "T", "T", "C", "T", "C", "T", "T"
    )), class = "data.frame", row.names = c(NA, -19L))

然后在您的JS中：

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

滑动器滑块：如何在多个动态实例上对其进行初始化但命名为

1 个答案: