Create a new array in an .each loop

Question

I am using swiper.js to create a nested swiper for my website. I am using the renderBullet function to create a custom pagination for it. This works great for the parent swiper and the first nested swiper.

However, when there are more nested swipers, all nested swipers have the pagination of the first nested swiper.

$('.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}}'
        },
    });

});

I know that I somehow need to iterate the following bit for each nested swiper, but I don't know how:

    var namesNested = [];

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

Answer 1

Hard to know your problem only by JS (Without HTML markup // complete-example).

No known issue with Swiper Pagination related to custom pagination Maybe the code-snippet below will be helpful.

Nested each loop

In your code looks like you always loop throw the same element(For the nested-array) - i solve this by using this: .children() (swiper-wrapper element) ==> .children() (swiper-slide elements)

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

Related stackoverflow Q:

• Targeting $(this) within nested for each loops in jQuery

• $.each() with nested array

Nested swipers - Get Custom pagination text from data-attribute (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>

Related: Read this Github issue:

• Multiple Instances of Swiper on Same page? #273

Codepen

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