Как можно сделать авто смену картинок в галерее?

Question

[Kipsi]

Здравствуйте. У меня есть небольшая галерея где при клике на маленькие картинки внизу они показываются в центе. Подскажите как можно сделать так, что бы при загрузке страницы например через setInterval они начинали через каждые 5-10 секунд сами переключатся на следующие и так бесконечно?

Answer 1

[Стас Хитрич]

window.addEventListener('load', () => {
  let current = 0;
  let max = thumbnails.length - 1;
  setInterval(() => {
     fullPhoto.src = thumbnails[current].getAttribute('src');
     current = current < max ? current + 1 : 0;
	}, 1000);
})

Answer 2

[Сергей Николаевич]

Привет. Тебе нужно сделать отдельную функцию, которая отображает нужный слайд по параметру, например так:

function showSlide(id) {
    fullPhoto.src = arr[id].src;
    descPhoto.textContent = arr[id].desc;
}

В коде слушателя

thumbnail.addEventListener('click', function () {
    return showSlide(this.dataset.id)
}

И добавить интервальный таймер, где будет вызываться эта же функция. Если id больше длины массива, то id = 0. И не забыть текущее id хранить в переменной.

Но если честно: Вам стоит взять готовый плагин галереи. Например: https://kenwheeler.github.io/slick/. Там уже все есть, даже адаптивность