JSFiddle - React, Tailwind, and code Playground

HTML

<section class="slider-wrapper">

    <div class="container">
      <div class="basic-title">
        Галерея наших работ
      </div>
    </div>


    <div class="slider-block">

      <div class="slider-block_content">



        <div class="slider-content_item">
          <img src="/assets/img/img-5372-22-05-19-02-58.png" alt="">
        </div>
        <div class="slider-content_item">
          <img src="/assets/img/792-a-384-a-e-9-ca-4650-afc-8-bf-6772106788-22-05-19-02-35.png" alt="">
        </div>
        <div class="slider-content_item">
          <img src="/assets/img/b-130-c-3-a-0-5945-4-a-2-b-9-fc-7-98-cfbb-5-ff-476-22-05-19-02-35.png" alt="">
        </div>
        <div class="slider-content_item">
          <img src="/assets/img/img-9123-22-05-19-02-43.png" alt="">
        </div>
        <div class="slider-content_item">
          <img src="/assets/img/img-4553-22-05-19-02-33.png" alt="">
        </div>
        <div class="slider-content_item">
          <img src="/assets/img/img-5340-22-05-19-02-58.png" alt="">
        </div>

        <div class="slider-content_item">
          <img src="/assets/img/img-5372-22-05-19-02-58.png" alt="">
        </div>
        <div class="slider-content_item">
          <img src="/assets/img/792-a-384-a-e-9-ca-4650-afc-8-bf-6772106788-22-05-19-02-35.png" alt="">
        </div>
        <div class="slider-content_item">
          <img src="/assets/img/b-130-c-3-a-0-5945-4-a-2-b-9-fc-7-98-cfbb-5-ff-476-22-05-19-02-35.png" alt="">
        </div>
        <div class="slider-content_item">
          <img src="/assets/img/img-9123-22-05-19-02-43.png" alt="">
        </div>
        <div class="slider-content_item">
          <img src="/assets/img/img-4553-22-05-19-02-33.png" alt="">
        </div>
        <div class="slider-content_item">
          <img src="/assets/img/img-5340-22-05-19-02-58.png" alt="">
        </div>




      </div>


    </div>


  </section>

SCSS

.container {
  width: 1200px;
}
.slider-wrapper {
  max-width: 100%;
  position: relative;
  padding: 4rem 0;
}

.slider-block {
  width: 100%;
  height: 600px;
  position: relative;
}

.slider-block_content {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-basis: 100%;
}

.slider-content_item {
  width: 311px;
  height: 100%;
  margin: 0 10px;
  flex-shrink: 0;
  transition: 1s;
  background-color: red;

  &:first-child {
    margin-left: 0;
  }
}

.slider-content_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  text-align: center;
}

.slider-nav {
  position: relative;
  color: white;
  font-size: 28px;
  top: 50%;
  cursor: pointer;
  z-index: 100;
}

.slider-nav_next {
  position: absolute;
  right: 0;
  z-index: 100;
  height: 100%;
}

.slider-nav_prev {
  position: absolute;
  left: 0;
  z-index: 100;
  height: 100%;
}

JavaScript

let sliderLength = document.getElementsByClassName('slider-content_item').length;
let $slideItem = document.getElementsByClassName('slider-content_item');
let slideWidth = $slideItem.offsetWidth
console.log(slideWidth)
let currentSlide = 1;
function nextSlide() {

  if (currentSlide >= sliderLength) {
    $slideItem.style.transform = 'translate(0px)';
    currentSlide = 1
  }
  else {


    $slideItem.style.transform = 'translate(' + (-slideWidth) * currentSlide + 'px' + ')';

    currentSlide++
    console.log(currentSlide)


  }

  console.log($slideItem)
}




let slideTimer = setInterval(() => nextSlide(), 2000)