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

Question

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

HTML + CSS + JS: https://jsfiddle.net/k72nth41/

Сам JS:

let slideIndex = 1;
showSlides(slideIndex);

let prev = document.getElementById ('prev');
let next = document.getElementById ('next');

next.addEventListener ("click", function () {
  showSlides(slideIndex += 1);

});

prev.addEventListener ("click", function () {
  showSlides(slideIndex -= 1);
});

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


function showSlides(n) {
    let slides = document.getElementsByClassName("myslide");
    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 = "flex";    
  }

 let timer = setInterval(function(){
    slideIndex++;
    showSlides(slideIndex);
  },5000);

Answer 1

Вот такое решение у меня получилось. Я использовал clearInterval() для прерывания работы интервала. После "очистки" интервал вновь создастся и будет выполнять перелистывание каждые 5 секунд. (Я добавил таймер и покрасил картинки в разные цвета, чтобы было более понятно что вообще происходит.)

let slideIndex = 1;
showSlides(slideIndex);

let prev = document.getElementById ('prev');
let next = document.getElementById ('next');

next.addEventListener ("click", function () {
  showSlides(slideIndex += 1);
  makeTimer();//Пересоздаем интервал если производится нажатие 
});

prev.addEventListener ("click", function () {
  showSlides(slideIndex -= 1);
  makeTimer();//Пересоздаем интервал если производится нажатие 
});

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


function showSlides(n) {
    let slides = document.getElementsByClassName("myslide");
    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 = "flex";    
  }
 var timer = 0;
 makeTimer(); //Создаем интервал 
 function makeTimer(){
    clearInterval(timer) //Очистим интервал, это позволит прервать его работу и отменить перелистывание
    timer = setInterval(function(){
      slideIndex++;
      showSlides(slideIndex);
    },5000);
  }
  
  
 //Таймер, (чтобы было удобнее считать время) можно удалить
 var seconds = 5;
 setInterval(()=>{
    seconds = seconds - 1;
    if(!seconds){seconds = 5;}
        document.getElementById("timeVisual").innerHTML = seconds
 },1000)

.slider_wrapper {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
.myslide {
  display: none;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
.myslide img {
  margin-right: 15px;
  margin-left: 15px;
}
.slider_wrapper a {
  cursor: pointer;
}
.pack_1{
     background-color: red;
}
.pack_2{
     background-color: green;
}
.pack_3{
     background-color: blue;
}
.pack_4{
     background-color: orange;
}

<div class="slider_wrapper">
  <a id="prev"><img src="/img/slides/prev.min.png" alt="prev"></a>
  
  <div class="myslide">
    <div class="slider_item pack_1"><img src="img/slides/1.png" alt="1"></div>
    <div class="slider_item pack_1"><img src="img/slides/2.png" alt="2"></div>
    <div class="slider_item pack_1"><img src="img/slides/3.png" alt="3"></div>
  </div>
  <div class="myslide">
    <div class="slider_item pack_2"><img src="img/slides/7.png" alt="8"></div>
    <div class="slider_item pack_2"><img src="img/slides/8.png" alt="sl"></div>
    <div class="slider_item pack_2"><img src="img/slides/9.png" alt="sl"></div>
  </div>
  <div class="myslide">
    <div class="slider_item pack_3"><img src="img/slides/13.png" alt="sl"></div>
    <div class="slider_item pack_3"><img src="img/slides/14.png" alt="sl"></div>
    <div class="slider_item pack_3"><img src="img/slides/15.png" alt="sl"></div>
  </div>
  <div class="myslide">
    <div class="slider_item pack_4"><img src="img/slides/17.png" alt="sl"></div>
    <div class="slider_item pack_4"><img src="img/slides/18.png" alt="sl"></div>
    <div class="slider_item pack_4"><img src="img/slides/19.png" alt="sl"></div>
  </div>  

  <a id="next"><img src="/img/slides/next.min.png" alt="next"></a>
</div>
<h1 id="timeVisual"><h1>

Answer 2

Чтобы двойных переходов не было, ловите клик на кнопки и запускаете функцию, которая очищает созданный вами таймер/интервал, и со след строчки снова запустите таймер/интервал, выходит что при нажатии на кнопки отсчет обнуляется и считает заново.

БЛОГ НА HUSL

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

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