JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div class="slider">
  <div class="slider__wrapper">
    <!-- Пкрвый блок -->
    <div class="slider__item">
      <div class="blockPic">
        <div class="radiusPic">
          <img src="https://img2.akspic.ru/image/146213-tigr-hishhnik-zivotnoe-bengalskij_tigr-bakenbardy-3840x2160.jpg" class="pic" >
        </div>
        <div class="nameWorkers">

        </div>
      </div>
    </div>
    <div class="slider__item">
      <div class="blockPic">
        <div class="radiusPic"><img src="https://img2.akspic.ru/image/146213-tigr-hishhnik-zivotnoe-bengalskij_tigr-bakenbardy-3840x2160.jpg" class="pic" ></div>
        <div class="nameWorkers">

        </div>
      </div>
    </div>
    <div class="slider__item">
      <div class="blockPic">
        <div class="radiusPic">
          <img src="https://img2.akspic.ru/image/146213-tigr-hishhnik-zivotnoe-bengalskij_tigr-bakenbardy-3840x2160.jpg" class="pic" >
        </div>
        <div class="nameWorkers">

        </div>
      </div>
    </div>
    <!-- Второй -->
    <div class="slider__item">
      <div class="blockPic ">
        <div class="radiusPic">
          <img src="https://img2.akspic.ru/image/146213-tigr-hishhnik-zivotnoe-bengalskij_tigr-bakenbardy-3840x2160.jpg" class="pic" >
        </div>
        <div class="nameWorkers">

        </div>
      </div>
    </div>
    <div class="slider__item">
      <div class="blockPic ">
        <div class="radiusPic">
          <img src="https://img2.akspic.ru/image/146213-tigr-hishhnik-zivotnoe-bengalskij_tigr-bakenbardy-3840x2160.jpg" class="pic" >
        </div>
        <div class="nameWorkers">

        </div>
      </div>
    </div>
    <div class="slider__item">
      <div class="blockPic ">
        <div class="radiusPic">
          <img src="https://img2.akspic.ru/image/146213-tigr-hishhnik-zivotnoe-bengalskij_tigr-bakenbardy-3840x2160.jpg" class="pic" >
        </div>
        <div class="nameWorkers">

        </div>
      </div>
    </div>
    <!-- Третий -->
...

CSS

.workers {
    background-color: #efefef;
    margin-top: 10em;
    overflow: hidden;
}
 
.workers h2 , .center h2{
    font-weight: bold;
    color: #000;
    font-size: 3em;
    text-align: center;
    padding: 2em 0;
}
 
.text {
    margin: 0 auto;
    padding: 0 10%;
}
.text h3 {
    font-weight: bold;
    color: #000;
    font-size: 2em;
    text-align: center;
    padding: 2em 0 0;
}
 
.text p {
    font-size: 2em;
    padding: 0 0 2em;
}
 
.slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
 
 
 
.radiusPic {
  width: 260px;
    height: 260px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 0 36px 7px #3333cc33;
}
 
.pic {
  width: auto;
  height: 100%;
  margin:0 0 0 -72px;
 
}
 
 
.prev img, .next img {
    width: 3em;
    position: absolute;
    z-index: 999;
    top: 9em;
}
 
.slider__wrapper {
    display: flex;
    transition: transform 0.6s ease;
    margin: 3em 5em 2em 6em;
}
 
.slider__item {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}
 
 
.slider__control {
    position: absolute;
    top: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 13%;
    transform: translateY(-150%);
}
 
    .slider__control_show {
      display: flex;
    }
 
    .slider__control_left {
      left: 6em;
      background-image: url(img/left.png);
    }
 
    .slider__control_right {
      right: 5em;
      background-image: url(img/right.png);
    }

JavaScript

var multiItemSlider = (function () {
                return function (selector, config) {
                var
                  _mainElement = document.querySelector(selector), // основный элемент блока
                  _sliderWrapper = _mainElement.querySelector('.slider__wrapper'), // обертка для .slider-item
                  _sliderItems = _mainElement.querySelectorAll('.slider__item'), // элементы (.slider-item)
                  _sliderControls = _mainElement.querySelectorAll('.slider__control'), // элементы управления
                  _sliderControlLeft = _mainElement.querySelector('.slider__control_left'), // кнопка "LEFT"
                  _sliderControlRight = _mainElement.querySelector('.slider__control_right'), // кнопка "RIGHT"
                  _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // ширина обёртки
                  _itemWidth = parseFloat(getComputedStyle(_sliderItems[0]).width), // ширина одного элемента    
                  _positionLeftItem = 0, // позиция левого активного элемента
                  _transform = 0, // значение транфсофрмации .slider_wrapper
                  _step = _itemWidth / _wrapperWidth * 300, // величина шага (для трансформации)
                  _items = []; // массив элементов
                // наполнение массива _items
                _sliderItems.forEach(function (item, index) {
                  _items.push({ item: item, position: index, transform: 0 });
                });
 
                var position = {
                  getMin: 0,
                  getMax: _items.length - 5,
                }
 
                var _transformItem = function (direction) {
                  if (direction === 'right') {
                    if ((_positionLeftItem + _wrapperWidth  / _itemWidth - 1) >= position.getMax) {
                      return;
                    }
                    if (!_sliderControlLeft.classList.contains('slider__control_show')) {
                     ...