JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider">
  <h2 class="slider_title">Text text</h2>
  <div class="slider__swiper">
      <div class="swiper-slide">
        <img class="slider__img" src="https://placeimg.com/300/300/animals" alt="">
      </div>
      <div class="swiper-slide">
        <img class="slider__img" src="https://placeimg.com/300/300/arch" alt="">
      </div>
      <div class="swiper-slide">
        <img class="slider__img" src="https://placeimg.com/300/300/nature" alt="">
      </div>
      <div class="swiper-slide">
        <img class="slider__img" src="https://placeimg.com/300/300/people" alt="">
      </div>
      <div class="swiper-slide">
        <img class="slider__img" src="https://placeimg.com/300/300/tech" alt="">
      </div>
      <div class="swiper-slide">
        <img class="slider__img" src="https://placeimg.com/300/300/tech/grayscale" alt="">
      </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%);
 }
 
.slider__swiper{
  display: flex;
  overflow-x: auto;
}

 .swiper-slide{
   min-width: 300px;   
   margin-right: 50px;
 }
 

  .swiper-slide:nth-child(odd){
   z-index: 9;
 }
 
 .slider__img{
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
 }