Edit in JSFiddle

  <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>
.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%;
}
/**
 * для вопроса https://toster.ru/q/666502
 * Как получить все элементы с определенным id и применить к ним какую либо функцию?
 */
const sliderItems = [...document.getElementsByClassName('slider-content_item')];
const sliderLength = sliderItems.length;

let currentSlide = 0; // отсчёт от 0

function nextSlide() {
  currentSlide = ++currentSlide % sliderLength;
  const offset = sliderItems.reduce((p,c,i) => i < currentSlide ? p + c.offsetWidth : p, 0);
  sliderItems.forEach(el => el.style.transform = `translate(-${offset}px)`);
}


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