[TheSanches]

Пишу слайдер карусель, запрограммировал кнопку вправо, а вот кнопку в влево, что то не получается, подскажите пожалуйста как дополнить мой код, спасибо.

<div class="slider-container">

    <div class="slider">
      <div class="slider__item">1</div>
      <div class="slider__item">2</div>
      <div class="slider__item">3</div>
      <div class="slider__item">4</div>
    </div>

    <div class="arrows">
      <span class="arrows__item arrows__item_prew">❰</span>
      <span class="arrows__item arrows__item_next">❱</span>
    </div>

  </div>

body {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  display: block;
  pointer-events: none;
}

.slider-container{
  max-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
}

.slider{
  display: flex;
  align-items: center;
  user-select: none;  
  transition: all .4s ease-in-out;
  transform: translateX(0);
  will-change: transform;
}

.slider__item{
  flex-shrink: 0;
  width: 100%;
  height: 300px;
  background: rgb(170, 170, 170);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  line-height: 1;
  font-weight: 700;
}

.slider__item:nth-child(even){
  background: rgb(123, 122, 122);
}

.arrows{
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.arrows__item{
  cursor: pointer;
  font-size: 3rem;
  line-height: 1;
  user-select: none;
  display: inline-block;
  margin: 0 1rem; 
}

function sliderCarousel(){
  'use strict';

  const sliderItem = document.querySelectorAll('.slider__item'),
        slider = document.querySelector('.slider'),
        arrows = document.querySelectorAll('.arrows__item');

  let countWidth = sliderItem[0].offsetWidth,
      count = 0;

    arrows[0].addEventListener('click', function(){

      // difficulties with this part of the code
      
    });

    arrows[1].addEventListener('click', function(){
      if(count < sliderItem.length - 1){
        slider.style.transform = `translateX(-${countWidth}px)`;
        countWidth += sliderItem[count].offsetWidth;
        count++;
      } else {
        count = 0;
        slider.style.transform = `translateX(0px)`;
        countWidth = sliderItem[0].offsetWidth;
      }
    });
}
sliderCarousel();