Initialize Swiper carousels with dynamic content

HTML

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

<div class="swiper-container"></div>
<div class="swiper-container"></div>
<div class="swiper-container"></div>

CSS

.swiper-container {
  margin: 10px;
  padding: 10px;
  border: 1px solid silver;
}

.swiper-slide {
  text-align: center;
}

JavaScript

const sliderHTML = `
  <div class="swiper-wrapper">${Array.from(Array(5).keys(), n => `
    <div class="swiper-slide">
      <h2>${n}</h2>
    </div>`).join('')}
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
`;

const sliderOptions = {
  //loop: true,
  slidesPerView: 1,
  on: {
    slideChange() {
      sliders.forEach(n => n.slideToLoop(this.realIndex));
    },
  },
};

const sliders = Array.from(document.querySelectorAll('.swiper-container'), el => {
  el.innerHTML = sliderHTML;

  return new Swiper(el, {
    ...sliderOptions,
    navigation: {
      nextEl: el.querySelector('.swiper-button-next'),
      prevEl: el.querySelector('.swiper-button-prev'),
    },
  });
});