Следующее и предыдущее фото

Чтобы посмотреть другое фото, сейчас нужно закрыть лайтбокс и щёлкнуть по другой плитке. Две новые кнопки в лайтбоксе ускорят дело: одна переходит к предыдущему фото, другая — к следующему.

Задание. Добавьте в лайтбокс две кнопки, например под подписью: одну с классом previous, другую с классом next. Текст на них может быть ← и → или Назад и Вперёд. Как и кнопка закрытия, они принадлежат лайтбоксу и сами ничего не меняют: они отправляют события previous и next, а другое фото выбирает App.vue. Лайтбоксу даже не нужно знать, какое фото он показывает.

После последнего фото next переходит к первому, а перед первым previous переходит к последнему, так что можно ходить по кругу. Плитка показанного фото остаётся выбранной, как и раньше.

Совет: если App.vue запоминает позицию выбранного фото в массиве, то следующее фото лежит на позиции на единицу больше, а последняя позиция — photos.length - 1.

Вот и весь проект. Ваша галерея состоит из трёх компонентов, и у каждого своя работа. PhotoTile показывает фото, которое получает в пропе, и событием сообщает, что по нему щёлкнули. Lightbox — рамка: он показывает то, что даёт ему App.vue через слоты, а его кнопки только отправляют события. Данные и решения находятся в App.vue: какие есть фото и какое из них выбрано. Приложения на Vue побольше устроены так же, только компонентов в них больше. В следующем уроке, «Жизненный цикл и данные», ваши компоненты будут загружать данные с сервера, когда появляются на странице, и останавливать свои таймеры, когда исчезают.