Галерея с клавиатурой
Условие
Галерея изображений по массиву { id, src, alt }. Требования: · превью - <button class="thumb" data-id>, крупное - <img class="big">; · активное превью имеет класс "on"; · ← и → переключают по кругу, Home и End на края; · клик по превью выбирает его; · при смене активного соседние изображения предзагружаются вызовом preload(src) - ровно по одному разу на адрес; · alt у крупного изображения берётся из данных.
Что проверяют тесты
показывает первое
стрелки переключают по кругу
Home и End
клик выбирает
предзагружает соседей
не грузит один адрес дважды
Как подойти
Две независимые механики. Навигация: одна функция с нормализацией индекса закрывает и стрелки, и края. Предзагрузка: соседние изображения подгружаются заранее, чтобы переключение было мгновенным, а множество загруженных живёт в ref - иначе его изменение вызовет рендер и цикл. Что назвать вслух: жесты на тач-устройствах, полноэкранный режим, размеры под плотность экрана, роль tablist и подписи для скринридера.
Подсказки: 3
- Круговая арифметика через остаток с прибавлением длины.
- Множество уже загруженных адресов держи в ref - оно не влияет на отрисовку.
- Предзагрузка - побочный эффект смены активного изображения.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.