https://nadin-it.ru/slider/script/script.js

1let sliderItems = document.getElementById('slides'), //контейнер слайдеров
2  prev = document.getElementById('prev'),
3  next = document.getElementById('next'),
4  dots = document.querySelectorAll(".dot");
5
6function slide() {
7  let slides = sliderItems.getElementsByClassName('slide'), //слайды
8    slidesLength = slides.length, //5
9    index = 0,
10    allowShift = true,
11    slideSize = slides[0].offsetWidth; //400
12
13  // Clone first and last slide
14  sliderItems.appendChild(slides[0].cloneNode(true));
15  sliderItems.insertBefore(slides[slidesLength - 1].cloneNode(true), slides[0]);
16
17  // Click events
18  prev.onclick = () => {
19    shiftSlide(false);
20    activeDot(index)
21  }
22  next.onclick = () => {
23    shiftSlide(true);
24    activeDot(index)
25  }
26
27  // Transition events
28  sliderItems.addEventListener('transitionend', checkIndex);
29
30  // Click dots
31  function clickDot(m) {
32    sliderItems.classList.add('shifting');
33    sliderItems.style.left = -(slideSize * (m + 1)) + "px";
34  }
35
36  //
37  function activeDot(n) {
38    for (dot of dots) {
39      if (index == slidesLength) {
40        n = 0;
41        dots[n].classList.add('active');
42        dot.classList.remove('active');
43      } else if (index == -1) {
44        n = slidesLength - 1;
45        dots[n].classList.add('active');
46        dot.classList.remove('active');
47      }
48      dot.classList.remove('active');
49    }
50    dots[n].classList.add('active');
51  }
52
53
54  function shiftSlide(dir) {
55    sliderItems.classList.add('shifting');
56    if (allowShift) {
57      if (dir == true) {     //click next
58        sliderItems.style.left = sliderItems.offsetLeft - slideSize + "px";
59        index++;
60      } else if (dir == false) {   //click left   
61        sliderItems.style.left = sliderItems.offsetLeft + slideSize + "px";
62        index--;
63      }
64    }
65    allowShift = false;
66  }
67
68  function checkIndex() {
69    sliderItems.classList.remove('shifting');
70    if (index == -1) {
71      sliderItems.style.left = -(slidesLength * slideSize) + "px";
72      index = slidesLength - 1;
73    }
74    if (index == slidesLength) {
75      sliderItems.style.left = -(1 * slideSize) + "px";
76      index = 0;
77    }
78    allowShift = true;
79  }
80
81  dots.forEach((item, indexDot) => {
82    item.onclick = () => {
83      index = indexDot;
84      activeDot(index);
85      clickDot(index);
86    }
87  })
88}
89
90slide();
91