Question

我正在使用swiper.js为我的网站创建嵌套的swiper。我正在使用renderBullet函数为其创建自定义分页。这对于父级刷卡器和第一个嵌套的刷卡器非常有用。

但是，当嵌套的刷卡器更多时，所有嵌套的刷卡器都具有第一个嵌套的刷卡器的分页。

$('.swiper-container-nested').each(function () {

    var namesNested = [];

    $(".c-home__slide-nested.swiper-slide").each(function () {
        namesNested.push($(this).data("name"));
    });

    var swiperNested = new Swiper('.c-home__swiper-nested.swiper-container-nested', {
        speed: 0,
        spaceBetween: 100,
        direction: 'horizontal',
        nested: true,
        autoHeight: true,
        pagination: {
            el: '.swiper-pagination-nested',
            clickable: 'true',
            type: 'bullets',
            renderBullet: function (index, className) {
                return '<li class="' + className + '  c-link secondary">' + (namesNested[index]) + '</li>';
            },
            bulletClass: 'c-menu__item',
            bulletActiveClass: 'active',
        },
        allowTouchMove: false,
        a11y: {
            prevSlideMessage: 'Previous section',
            nextSlideMessage: 'Next section',
            firstSlideMessage: 'This is the first section',
            lastSlide: 'This is the last section',
            paginationBulletMessage: 'Go to section {{index}}'
        },
    });

});

我知道我需要为每个嵌套的swiper迭代以下位，但是我不知道如何：

    var namesNested = [];

    $(".c-home__slide-nested.swiper-slide").each(function () {
        namesNested.push($(this).data("name"));
    });

Answer 1

仅通过JS即可知道您的问题（没有HTML标记//完整示例）。

与Swiper Pagination相关的custom pagination没有已知问题也许下面的代码段会有所帮助。

嵌套每个循环

在您的代码中，您似乎总是循环抛出相同的元素（对于嵌套数组）-我使用this解决了这个问题： .children()（滑动包装元素）==> .children()（滑动包装元素）

$this.children().children().each(function(index, element) {
/*do something*/

相关的堆栈溢出问题：

嵌套的滑动条-从数据属性（Jquery）获取自定义分页文本：

var swiperH = new Swiper(".swiper-container-h", {
  spaceBetween: 50,
  pagination: {
    el: ".swiper-pagination-h",
    clickable: true
  }
});

// 1. outer loop //
$(".swiper-container-nested").each(function(index, element) {
  var $this = $(this);
  var fruitsArray = [];
  // 1.1. nested loop
  $this.children().children().each(function(index, element) {
    fruitsArray.push($(this).data("fruit"));
  });

  /* create swiper objects */
  $this.addClass("instance-" + index);
  var swiperNested = new Swiper(".instance-" + index, {
    direction: "vertical",
    spaceBetween: 50,
    pagination: {
      el: ".swiper-pagination-nested",
      clickable: true,
      renderBullet: function(index, className) {
        return (
          '<span class="' +
          className +
          '">' +
          (index + 1) +
          "." +
          fruitsArray[index] +
          "</span>"
        );
      }
    }
  });
});

html,
body {
  position: relative;
  height: 100%;
}
body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.swiper-container-v {
  background: #eee;
}

.swiper-pagination-nested .swiper-pagination-bullet {
      width: auto;
      height: 20px;
      text-align: center;
      border-radius: 5px;
      line-height: 20px;
      font-size: 12px;
      padding: 5px 9px;
      color:#000;
      opacity: 1;
      background: rgba(0,0,0,0.2);
}
.swiper-pagination-nested .swiper-pagination-bullet-active {
      color:#fff;
      background: red;
}
ul.swiper-wrapper,
li.swiper-slide {
  padding: 0px;
  margin: 0px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css" rel="stylesheet"/>

<!-- Swiper -->
<main class="swiper-container swiper-container-h">
  <ul class="swiper-wrapper">
    <li class="swiper-slide">
      <div class="swiper-container swiper-container-nested">
        <div class="swiper-wrapper">
          <div data-fruit="Orange" class="swiper-slide">1. Orange</div>
          <div data-fruit="Apple" class="swiper-slide">2. Apple</div>
          <div data-fruit="Cranberry" class="swiper-slide">3. Cranberry</div>
          <div data-fruit="Guava" class="swiper-slide">4. Guava</div>
          <div data-fruit="Pumpkin" class="swiper-slide">5. Pumpkin</div>
        </div>
        <div class="swiper-pagination swiper-pagination-nested"></div>
      </div>
    </li>
    <li class="swiper-slide">
     <div class="swiper-container swiper-container-nested">
        <div class="swiper-wrapper">
          <div data-fruit="Cranberry" class="swiper-slide">1. Cranberry</div>
          <div data-fruit="Guava" class="swiper-slide">2. Guava</div>
          <div data-fruit="Pumpkin" class="swiper-slide">3. Pumpkin</div>
        </div>
        <div class="swiper-pagination swiper-pagination-nested"></div>
      </div>
    </li>
    <li class="swiper-slide">
      <div class="swiper-container swiper-container-nested">
        <div class="swiper-wrapper">
          <div data-fruit="Lemon" class="swiper-slide">1. Lemon</div>
          <div data-fruit="Melon" class="swiper-slide">2. Melon</div>
        </div>
        <div class="swiper-pagination swiper-pagination-nested"></div>
      </div>
    </li>
  </ul>
  <!-- Add Pagination -->
  <div class="swiper-pagination swiper-pagination-h"></div>
</main>


<!-- assets -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src=""></script>

相关：阅读此Github问题：

Multiple Instances of Swiper on Same page? #273

Codepen

https://codepen.io/ezra_siton/pen/MWgqMde?editors=1010

在.each循环中创建一个新数组

1 个答案:

嵌套每个循环

嵌套的滑动条-从数据属性（Jquery）获取自定义分页文本：