JSFiddle - React, Tailwind, and code Playground

HTML

<!--навигация--> 
   <header class="header">     
       <nav class="menu">                             
          <ul>
            <li ><a  class="menu-active" href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
           <li><a href="#services">Services</a></li>
           <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#blog">Blog</a></li>
           <li><a href="#contact">Contact Me</a></li>
        </ul>      
      </nav>               
   </header><!--конец модуля навигация-->


<div class="slider">
    <div class="slider_wrapper">
      <div class="slider_item">
        <div style="height: 250px; background: orange;">1</div>
      </div>
      <div class="slider_item">
        <div style="height: 250px; background: green;">2</div>
      </div>
      <div class="slider_item">
        <div style="height: 250px; background: violet;">           
     </div>
      </div>
      <div class="slider_item">
        <div style="height: 250px; background: coral;">4</div>
      </div>
    </div>
    <a class="slider_control slider_control_left" href="#" role="button"></a>
    <a class="slider_control slider_control_right" href="#" role="button"></a>
  </div>

CSS

body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      color: #fff;
      height: 3000px;
    }

    .slider {
      position: relative;
      overflow: hidden;
    }

    .slider_wrapper {
      display: flex;
      transition: transform 0.6s ease;
    }

    .slider_item {
      flex: 0 0 100%;
      max-width: 100%;
    }

    @media (min-width: 980px) {
      .slider_item {
        flex: 0 0 50%;
        max-width: 50%;
      }
    }

    .slider_control {
      position: absolute;
      top: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      color: #fff;
      text-align: center;
      opacity: 0.5;
      height: 50px;
      transform: translateY(-50%);
      background: rgba(0, 0, 0, .5);
    }

    .slider_control:hover,
    .slider_control:focus {
      color: #fff;
      text-decoration: none;
      outline: 0;
      opacity: .9;
    }

    .slider_control_left {
      left: 0;
    }

    .slider_control_right {
      right: 0;
    }

    .slider_control::before {
      content: '';
      display: inline-block;
      width: 20px;
      height: 20px;
      background: transparent no-repeat center center;
      background-size: 100% 100%;
    }

    .slider_control_left::before {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
    }

    .slider_control_right::before {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
    }

    .slider_item {
      line-height: 250px;
      font-size: 100px;
      text-align: center;
    }
    
 ...

JavaScript

function  multiItemSlider() {

      function _isElementVisible(element) {
        let rect = element.getBoundingClientRect();
        let  vWidth = window.innerWidth || doc.documentElement.clientWidth;
        let vHeight = window.innerHeight || doc.documentElement.clientHeight;
        
        let  elemFromPoint = function (x, y){ 
        return document.elementFromPoint(x, y) 
        };
        if (rect.right < 0 || rect.bottom < 0
          || rect.left > vWidth || rect.top > vHeight)
          return false;
          
        return (
          element.contains(elemFromPoint(rect.left, rect.top))
          || element.contains(elemFromPoint(rect.right, rect.top))
          || element.contains(elemFromPoint(rect.right, rect.bottom - 1))
          || element.contains(elemFromPoint(rect.left, rect.bottom - 1))
        );
      }

      return function (selector, config) {
       //------Переменные --------------------
         let _mainElement = document.querySelector(selector); // основный элемент блока
         let _sliderWrapper = _mainElement.querySelector('.slider_wrapper'); // обертка для .slider-item
         let _sliderItems = _mainElement.querySelectorAll('.slider_item'); // элементы (.slider-item)
         let _sliderControls = _mainElement.querySelectorAll('.slider_control'); // элементы управления
         let _sliderControlLeft = _mainElement.querySelector('.slider_control_left'); // кнопка "LEFT"
         let  _sliderControlRight = _mainElement.querySelector('.slider_control_right'); // кнопка "RIGHT"
         let _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width); // ширина обёртки
         let _itemWidth = parseFloat(getComputedStyle(_sliderItems[0]).width); // ширина одного элемента    
         let _positionLeftItem = 0; // позиция левого активного элемента
         let _transform = 0; // значение транфсофрмации .slider_wrapper          
         let _step = _itemWidth / _wrapperWidth * 100; // величина шага (для...