JSFiddle - React, Tailwind, and code Playground

by Vadim

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="slider">
  <div class="swiper-container slider__swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide-text">
        <h2 class="slider_title">Text text</h2>
      </div>
      <div class="swiper-slide">
        <img class="slider__img swiper-lazy" src="#" data-src="https://placeimg.com/300/300/animals" alt="">
      </div>
      <div class="swiper-slide">
        <img class="slider__img swiper-lazy" src="#" data-src="https://placeimg.com/300/300/arch" alt="">
      </div>
      <div class="swiper-slide">
        <img class="slider__img swiper-lazy" src="#" data-src="https://placeimg.com/300/300/nature" alt="">
      </div>
      <div class="swiper-slide">
        <img class="slider__img swiper-lazy" src="#" data-src="https://placeimg.com/300/300/people" alt="">
      </div>
      <div class="swiper-slide">
        <img class="slider__img swiper-lazy" src="#" data-src="https://placeimg.com/300/300/tech" alt="">
      </div>
      <div class="swiper-slide">
        <img class="slider__img swiper-lazy" src="#" data-src="https://placeimg.com/300/300/tech/grayscale" alt="">
      </div>
    </div>
  </div>
</div>

CSS

.slider{
  height: 300px;
 }
 
 .slider_title{
   font-size: 7vw;
   text-transform: uppercase;
   color: #f00;

/*    
   position: absolute; top: 50%; left: 50%;
   transform: translate(-50%, -50%); 
*/
 }
 
 .swiper-slide-text {
   position: fixed !important;
   transform: translate(0px, 0px) !important;
   top: 0;
   left: 20px;
 }
 
 .swiper-slide:nth-child(odd){
   z-index: 9;
 }

JavaScript

// slider capability
      new Swiper('.slider__swiper', {
            lazy: true,
            lazy: {
                //  tell swiper to load images before they appear
                loadPrevNext: true,
                // amount of images to load
                loadPrevNextAmount: 6,
            },
            loop: false,
            speed: 1000,
            spaceBetween: 80,
            slidesPerView: 6,
            preloadImages: true,
            mousewheel: {
                releaseOnEdges: true,
            },
            breakpoints: {
                320: {
                    slidesPerView: 1,
                    spaceBetween: 16,
                },
                640: {
                    slidesPerView: 2,
                    spaceBetween: 30,
                },
                991: {
                    slidesPerView: 2,
                    spaceBetween: 30,
                },
                1200: {
                    slidesPerView: 3,
                    spaceBetween: 40
                },
                1441: {
                    slidesPerView: 3,
                    spaceBetween: 80
                }
            }
        });