JSFiddle - React, Tailwind, and code Playground

by Wagner Souza

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/swiper.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/swiper-bundle.js"></script>
<div 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 class="swiper-button-prev">
    <button>prev</button>
  </div>
  
  <div class="swiper-button-next">
    <button>next</button>
  </div>
</div>

<div 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 class="swiper-button-prev">
    <button>prev</button>
  </div>
  
  <div class="swiper-button-next">
    <button>next</button>
  </div>
</div>

JavaScript

const carrousels = {};

document.querySelectorAll('.swiper-container').forEach(function(item, index) {
	carrousels[index] = new Swiper(item, {
    spaceBetween: 100,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
});

carrousels[0].controller.control = [carrousels[1]];
carrousels[1].controller.control = [carrousels[0]];