Как лучше реализовать такой слайдер?

var itemSliderWrapper = document.querySelector('.main-slider__ins'); 
itemSlider = document.querySelectorAll('.main-slider__ins > .main-slider__item'); 
itemSliderLength = itemSlider.length - 1; 
arrowSliderLeft = document.querySelector('.js-arrow-left'), 
  arrowSliderRight = document.querySelector('.js-arrow-right'); 
 
 
function slider() { 
  var widthWrapperSlider = 0, 
    count = 0, 
    currentSlideWidth = itemSlider[0].offsetWidth, //width one slide 
    countSliderWidth = currentSlideWidth; //985 start number 
 
  for (var i = 0; i <= itemSliderLength; i++) { 
    widthWrapperSlider += itemSlider[i].offsetWidth; 
  } 
 
  itemSliderWrapper.style.width = widthWrapperSlider + 'px'; 
 
 
  function slideShow() { 
    if (countSliderWidth > (widthWrapperSlider - 985)) { 
      countSliderWidth = 0; 
    } else { 
      itemSliderWrapper.style.transform = "translate3d(" + -countSliderWidth + "px, 0px, 0px)"; 
      count++; 
      countSliderWidth += currentSlideWidth; 
    } 
  } 
 
 
  arrowSliderRight.addEventListener('click', sliderRight); 
 
  function sliderRight() { 
    slideShow(); 
  } 
 
 
  setInterval(slideShow, 3000); 
 
} 
 
slider();

.main-slider { 
  position: relative; 
} 
 
.main-slider__wrap { 
  width: 100%; 
  overflow: hidden; 
} 
 
.main-slider__ins { 
  width: 2988px; 
  display: flex; 
  flex-wrap: wrap; 
  -webkit-transition: all 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55); 
  transition: all 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55); 
} 
 
.main-slider__item { 
  display: flex; 
  width: 985px; 
  background: red; 
} 
 
.main-slider__item:nth-child(2) { 
  background: yellow; 
} 
 
.main-slider__item:nth-child(3) { 
  background: green; 
} 
 
.main-slider__desc { 
  margin-top: 70px; 
  width: 57%; 
  padding: 0 80px 0 40px; 
} 
 
.main-slider__title { 
  font-weight: normal; 
  font-size: 20px; 
  letter-spacing: 2px; 
  text-transform: uppercase; 
  margin: 0 0 20px 0; 
  color: #243238; 
} 
 
.main-slider p { 
  margin: 0; 
}

<div class="main-slider__wrap"> 
  <div class="main-slider__ins"> 
    <div class="main-slider__item"> 
      <div class="main-slider__desc"> 
        <h2 class="main-slider__title">Guillermo - Life & Business <br> Coaching WordPress Theme</h2> 
        <p>Check out Monstroid, the number 1 TemplateMonster’s WordPress theme from over 2000 themes. Monstroid has been used to create more than 5000 websites, and help hundreds of people launch their businesses online, so join the ranks of happy Monstroid 
          owners!</p> 
      </div> 
    </div> 
    <div class="main-slider__item"> 
      <div class="main-slider__desc"> 
        <h2 class="main-slider__title">Jedi - may the joomla be with <br> you</h2> 
        <p>Want to run a store, business site, portfolio or a blog – just purchase Jedi and check out how easy it is. No other theme on the market offers this much functionality in one pack.</p> 
      </div> 
    </div> 
    <div class="main-slider__item"> 
      <div class="main-slider__desc"> 
        <h2 class="main-slider__title">Woostroid</h2> 
        <p>Designed to be 2017’s ultimate ecommerce theme, Woostroid has both looks and functionality which together will double the efficiency of your e-store!</p> 
      </div> 
    </div> 
  </div> 
</div> 
 
<button class="js-arrow-left">Click Left</button> 
<button class="js-arrow-right">Click Right</button>