Как сделать автоматический слайдер с заменой div'ов друг на друга?

Question

[Игорь Миронов]

Comments

[Вадим]

Переключать через setTimeout им видимость

Answer 1

[zav19791979]

Сделать классы которые показывают один блок, можно с анимацией или другими красивостями и потом через интервал менять их.
Что то вроде такого https://jsfiddle.net/zav19791979/c92tsyd5/17/

Comments

[zav19791979]

условие проверки предыдущего индекса там избыточное, в итого лучше вот так

const items = document.querySelectorAll('.slider-item');
let prevIndex = 0;

if (items.length) {
  setInterval(
      () => {  
        let nextIndex = prevIndex + 1;
        nextIndex = nextIndex < items.length ? nextIndex : 0;

        items[prevIndex].classList.remove('active');
        items[nextIndex].classList.add('active');
        prevIndex = nextIndex;    
       },
      2 * 1000
    );
}

[NQUARE]

Чё, реально на JS?! Этож на CSS в три раза проще делается. С помощью keyframes.

[zav19791979]

Очень даже возможно, но.CSS я знаю плохо, потому так. Ну и у меня только принцип, менять классы, точнее с их помощью менять состояние вложенных блоков. А уж как его менять, через JS или CSS - на выбор каждого.

[Вадим]

NQUARE, Масштабируемость лучше закладывать сразу. Слайдеры на css хоть и возможны, даже с плавным переключением слайдов, однако, в один прекрасный момент к тебе приходит заказчик\менеджер проекта и говорит что нужно сделать что-то такое, чего css не умеет и, скорее всего, никогда уметь не будет. И всё, фиаско. Придётся переписывать слайдер полностью.

[Игорь Миронов]

Ля спасибо огромное парни