JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<div class="swiper-container-big">
  <div class="swiper-wrapper">

    <div class="swiper-slide swiper-slide--big">

      <div class="swiper-container1">
        <div class="swiper-wrapper">

          <div class="swiper-slide">
            <div class="swiper-zoom-container">
              <img src="http://placekitten.com/g/250/250" alt="cat">
            </div>
          </div>
          <!-- slide -->

          <div class="swiper-slide">
            <div class="swiper-zoom-container">
              <img src="http://placekitten.com/g/252/250" alt="cat">
            </div>
          </div>
          <!-- slide -->

          <div class="swiper-slide">
            <div class="swiper-zoom-container">
              <img src="http://placekitten.com/g/253/250" alt="cat">
            </div>
          </div>
          <!-- slide -->

          <div class="swiper-slide">
            <div class="swiper-zoom-container">
              <img src="http://placekitten.com/g/254/250" alt="cat">
            </div>
          </div>
          <!-- slide -->

        </div>
      </div>

      <div class="swiper-container-thumbs">
        <div class="swiper-wrapper">

          <div class="swiper-slide">
            <img src="http://placekitten.com/g/250/250" alt="cat">
          </div>
          <!-- slide -->

          <div class="swiper-slide">
            <img src="http://placekitten.com/g/252/250" alt="cat">
          </div>
          <!-- slide -->

          <div class="swiper-slide">
            <img src="http://placekitten.com/g/253/250" alt="cat">
          </div>
          <!-- slide -->

          <div class="swiper-slide">
            <img src="http://placekitten.com/g/254/250" alt="cat">
          </div>
          <!-- slide -->
        </div>
      </div>
      <!-- thumbs -->

    </div>
    <!-- big slide -->

    <div...

CSS

body {
  margin: 0;
  padding: 0;
}
.swiper-slide--big:nth-child(even) {
  background-color: lightgreen;
}

.swiper-wrapper {
  padding: 10px;
}

.swiper-container-thumbs .swiper-slide img {
  width: 150px;
}

JavaScript

var swiperBig = new Swiper(".swiper-container-big", {
  spaceBetween: 16,
  slidesPerView: 1,
});

var swiperThumbs = new Swiper(".swiper-container-thumbs", {
  spaceBetween: 16,
  nested: true,
  slidesPerView: 2,
});

var mySwiper = new Swiper('.swiper-container1', {
  spaceBetween: 16,
  nested: true,
  slidesPerView: 4,
  zoom: true,
  thumbs: {
    swiper: swiperThumbs
  }
});