Карусель
Условие
Карусель изображений по массиву строк. Требования: · текущий слайд - <div class="slide">, показан ровно один; · <button class="prev">, <button class="next">, переход по кругу; · точки <button class="dot" data-index={i}>, у активной класс "on", клик переключает; · автопрокрутка каждые 80 мс, если пропс autoplay истинный; · любое ручное переключение перезапускает отсчёт автопрокрутки; · таймер снимается при размонтировании.
Что проверяют тесты
показывает один слайд
вперёд и назад
ходит по кругу
точки показывают и переключают
автопрокрутка идёт
без autoplay стоит на месте
ручное переключение перезапускает отсчёт
таймер снимается
Как подойти
Две отдельные механики: круговая арифметика и перезапуск автопрокрутки. Перезапуск элегантнее всего выражается счётчиком-триггером в зависимостях эффекта - это честнее, чем ручной clearInterval в обработчике. Класть index в зависимости интервала нельзя: он будет пересоздаваться на каждом автопереходе и слайды поедут неравномерно, поэтому внутри - setIndex(i => …). Что назвать вслух: пауза при наведении и при скрытой вкладке, свайпы, предзагрузка соседних изображений, aria-live и кнопка паузы для доступности.
Подсказки: 3
- Круг по индексам - остаток от деления с прибавлением длины.
- Перезапуск интервала = изменение одной из его зависимостей.
- Внутри интервала используй функциональную форму, иначе замкнёшься на старом индексе.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.