Это наверняка дубль еще миллиона вопросов но мне лень искать линк на решенный)
Сгруппируй, при раскрытии одного из группы сначала проходи по всем и закрывай, потом открывай нужный
Есть проще но тяжелее вариант - слайдер с длительностью анимации перехода равной задержке автоплея, ну либо нулевой задержке автоплея, смотря учитывает ли он длительность перехода во времени активности слайда.
Ищем слайдер который умеет клонировать слайды и быть цикличным, это почти любой) Отключаем у него управление мышкой/кнопками/силоймысли и настраиваем величины автоплея + тайминг функцию анимации перехода
Картинке по-хорошему всегда надо объявлять какой-то размер, хотя бы в процентах, иначе получается стремная зависимость от контента. Для разных экранов можно использовать picture с разными источниками. А на деле эти 300х100 пикселей вместо 150х5 никакой роли не сыграют
Да - pug, ещё есть nunjucks по-моему лучше чем pug - не такой капризный и просто скриптовая обёртка для html а не свой язык. Есть handlebars но он тупенький, нет смысла когда есть nunjucks. Для всех трёх есть плагины для gulp'а. Ну на крайняк всякие gulp-include)
Если совсем по умному то читай про static site generatorы, в основном на реакте работают
