Непонятная мне проблема со слайдером

Question

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

const sliderLine = document.querySelector('.sl-line'),
  prevButton = document.querySelector('.btn-prev'),
  nextButton = document.querySelector('.btn-next'),
  inds = document.querySelectorAll('.ind')

let position = 0
indIndex = 0

const nextSlide = () => {
  if (position < 2500) {
    position += 500
  } else {
    position = 0
  }
  sliderLine.style.left = -position + 'px'
}

nextButton.addEventListener('click', nextSlide)

.cointainer {
  padding: 32px 10px;
  background: chartreuse;
  text-align: center;
}

.btn-prev,
.btn-next,
.sl-wrap,
.idn {
  display: inline-block;
  vertical-align: middle;
}

.sl-line {
  display: flex;
  position: relative;
  left: 0;
}

.sl-wrap {
  width: 500px;
  overflow: hidden;
}

.idn {
  width: 25px;
  height: 20px;
  background: rosybrown;
  border-radius: 50%;
  padding-top: 20px;
  margin-top: 8px;
}

.idn:hover {
  background: plum;
}

.idn:active {
  background: purple;
}

<div class="cointainer">
  <button class="btn-prev">PREV</button>
  <div class="sl-wrap">
    <div class="sl-line">
      <img src="https://dummyimage.com/500x600/ff9900/43455e.jpg&text=Slid_1" width="500" height="500" alt="">
      <img src="https://dummyimage.com/500x600/ff9900/43455e.jpg&text=Slid_2" width="500" height="500" alt="">
      <img src="https://dummyimage.com/500x600/ff9900/43455e.jpg&text=Slid_3" width="500" height="500" alt="">
      <img src="https://dummyimage.com/500x600/ff9900/43455e.jpg&text=Slid_4" width="500" height="500" alt="">
      <img src="https://dummyimage.com/500x600/ff9900/43455e.jpg&text=Slid_5" width="500" height="500" alt="">
      <img src="https://dummyimage.com/500x600/ff9900/43455e.jpg&text=Slid_6" width="500" height="500" alt="">
    </div>
  </div>
  <button class="btn-next">NEXT</button>
  <div class="idn-wrap">
    <div class="idn"></div>
    <div class="idn"></div>
    <div class="idn"></div>
    <div class="idn"></div>
    <div class="idn"></div>
    <div class="idn"></div>
  </div>

БЛОГ НА HUSL

Непонятная мне проблема со слайдером

Ответы (0 шт):