How to switch sliders correctly, programming them without problems?

Question

JavaScript

Good afternoon!
I am contacting you on a question, the basis of which with examples of its code you will see here:

But I need to refine this and I am faced with current problems, the solutions of which are difficult to come up with:

• Almost the slideshow otherwise works, but when you click on the "Forward" button, it doesn't want to switch from last to first;
  
• Since the mathematical operation of switching slides is correctly implemented for the "Forward" button, but the "Back" button does not completely cope with it (but it must withstand the same operation as the "Forward" button)
  

If you study the basis with examples of its code, then I will be glad to see your full-fledged options for solving questions on the problems that I have listed that you will meet.
But the questions are:

• How to correctly implement infinite switching of sliders in the slideshow interface?
  
• How to correctly bind an event to the "Back" button so that when you click on it, even the first slide switches to the last one?
  

Thank you in advance!

Answer 1

Since you already know what a codepen is, have you tried to just download any, the most primitive slider and see the logic?

<div class="slider">
  <div class="overflow-imgs">
    <div class="line-imgs">
      <img src="https://pp.userapi.com/c830409/v830409785/1be33e/73SFiK33foM.jpg" />
      <img src="https://pp.userapi.com/c830409/v830409785/1be345/oIX93cgm34k.jpg" />
      <img src="https://pp.userapi.com/c830409/v830409785/1be34c/ApLT7ZF9qXg.jpg" />
      <img src="https://pp.userapi.com/c830409/v830409785/1be353/SjILkQiUBac.jpg" />
    </div>
  </div>
  <div class="prev arrow">Назад</div><div class="next arrow">Вперед</div>
</div>

html, body{margin: 0px 0px 0px 0px;width:  100%;}

.slider{
  width: 230px;
  margin: 20px auto 0px auto;
}

.overflow-imgs{
  width: 100px;
  height: 100px;
  margin: 0px auto 0px auto;
  overflow: hidden;
}

.line-imgs{
  width: 400px;
  position: relative;
  left: 0px;
  -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.line-imgs > img{
  float: left;
}

.arrow{
  width: 100px;
  height: 40px;
  text-align: center;
  line-height: 37px;
  color: #fff;
  cursor: pointer;
  margin: 10px 0px 0px 0px;
  background: #2269ff;
  display: inline-block;
  position: relative;
  margin-left: 10px;
}

// http://www.cyberforum.ru/javascript-beginners/thread2334912.html



let lineImgs = document.querySelectorAll('.line-imgs')[0],
  img = lineImgs.querySelector('img'),
  i = 0;
document.querySelectorAll('.slider')[0].addEventListener('click',e => {
  if(e.target.classList.contains('next')) i == -3 ? (i = 0, lineImgs.style.left = '0px') : (i--, lineImgs.style.left = (i * img.width) + 'px');
  if(e.target.classList.contains('prev')) i == 0 ? (i = -3, lineImgs.style.left = '-300px') : (i++, lineImgs.style.left = (i * img.width) + 'px');
});