Next and Previous

To see another photo, you now have to close the lightbox and click another tile. Two more buttons in the lightbox will make it quicker: one goes to the previous photo, the other to the next one.

The task. Add two buttons to the lightbox, for example under the caption: one with the class previous and one with the class next. Their text can be ← and →, or Previous and Next. Like the close button, they belong to the lightbox and don't change anything themselves: they emit the events previous and next, and App.vue selects another photo. The lightbox doesn't even need to know which photo it shows.

After the last photo, next goes to the first one, and before the first one, previous goes to the last one, so you can go round and round. The tile of the photo shown is the selected one, as before.

A tip: when App.vue remembers the position of the selected photo in the array, the next photo is at the position one higher, and the last position is photos.length - 1.

That's the whole project. Your gallery is made of three components, and each has its own job. PhotoTile shows the photo it gets in a prop, and says with an event that it was clicked. Lightbox is a frame: it shows what App.vue gives it through its slots, and its buttons only emit events. The data and the decisions are in App.vue: which photos there are and which one is selected. Bigger Vue apps are made the same way, only with more components. In the next lesson, Lifecycle and Data, your components will load data from a server when they appear on the page, and stop their timers when they disappear.