Как сделать автоматическое переключение слайдов JS?

Question

[Olga17527]

У меня есть слайдер (код ниже) что мне нужно добавить что бы он автоматически перелистывался? + я хочу добавить кружки, которые будут как бы индикаторами, вот как на этом сайте: https://www.saxoprint.co.uk/. Буду очень очень благодарна всем кто поможет!!!

// Slider
let slideIndex = 1;
showSlides(slideIndex);

function nextSlide() {

    showSlides(slideIndex += 1);
}

function previousSlide() {
    showSlides(slideIndex -= 1);
}

function currentSlide(n) {
    showSlides(slideIndex = n);
}

function showSlides(n) {
    let i;
    let slides = document.getElementsByClassName("item");

    if (n > slides.length) {
      slideIndex = 1
    }
    if (n < 1) {
        slideIndex = slides.length
    }

    for (let slide of slides) {
        slide.style.display = "none";
    }
    slides[slideIndex - 1].style.display = "block";
}

Comments

[Сергей Сергей]

Проще взять готовую библиотеку для этого. Тут полно вопросов по ним, легко найти по слову "слайдер".

например swiper

А потом в мучениях их настраивать. Тут полно вопросов по ним, легко найти по словам "не могу" и "не получается".

[alexalexes]

Если вы с нуля пишите свою библиотеку слайдера, то вам придется пройти весь путь, набивая шишки.
Очевидно, чтобы сделать автопрокручивание, нужно дергать nextSlide() через интервальную задержку:
setInterval(nextSlide, 5000);
Но где шишки появятся? А в том, что где-то нужно хранить глобальное состояние, что слайдер инициирован с параметром автопрокручивания:
let autoplay = true;
В момент инициирования нужен некий конструктор, который создаст все интервальные обработчики (состояние инициализации и хранение глобальных состояний вынуждает создать класс слайдера и хранить в нем все состояния слайдера и все его функции как методы)
Потом захочется, чтобы автопрокрутка была не тупая, а останавливалась, когда на слайдер наводят мышью или он был в фокусе:

function mouseover_offautoplay() // обработчик события наведения мыши
{
  if(this.autoplay)
  {
     clearInterval(this.autoplay_interval_function); // зачищаем дескриптор интервальной функции, чтобы остановить автопрокрутку
  }
}

function mouseout_onautoplay() // обработчик события потери наведения мыши
{
  if(this.autoplay)
  {
     
this.autoplay_interval_function = // еще одна глобальная переменная, хранящая дескриптор интервальной функции
     setInterval(nextSlide, 5000);
  }
}

Нужно выбрать контейнер, на которые навешать данные события.
На этом нюансы не заканчиваются.
Например, а что делать для тех, кто имеет только сенсорный экран вместо мыши?