In the previous step, we created a `SlideshowOverlay`s as part of building a slideshow for our app.
Recall that slideshow will be structured as follows:
- The `Slideshow` consists of a single `Image`, with a transparent `SlideshowOverlay` on top.
- The `SlideshowOverlay` contains two `SlideshowNavigateButton`s, one on each side.
- The two `SlideshowNavigationButton`s will be used to navigate the slideshow by mouse.
In this step, we'll create the `Slideshow`.
> **Note:**
> If you don't feel like typing along, you can find all the code for this step here:
> https://github.com/makepad/image_viewer/tree/main/step_10
## What you will learn
In this step, you will learn:
- How to stack items on top of each other.
## Defining a `Slideshow`
Let's start by adding a definition for the `Slideshow`. A `Slideshow` combines an `Image` with the `SlideshowOverlay` we created earlier.
In **app.rs**, add the following code to the live design block, after the definition of SlideshowOverlay:
```rust
Slideshow = <View> {
flow: Overlay,
image = <Image> {
width: Fill,
height: Fill,
fit: Biggest,
source: (PLACEHOLDER)
}
overlay = <SlideshowOverlay> {}
}
```
This defines a `Slideshow` with the following properties:
- `flow: Overlay` ensures the slideshow's children are stacked on top of each other.
## Updating `App`
Now that we have a `Slideshow`, let's update our definition of `App` to display a `Slideshow` instead of a `SlideshowOverlay`.
In **app.rs**, replace the definition of `App` in the live design block with the one here below:
```rust
App = {{App}} {
ui: <Root> {
<Window> {
body = <View> {
slideshow = <Slideshow> {}
}
}
}
}
```
## Checking our Progress so far
Let's check our progress so far.
Make sure you're in your package directory, and run:
```
cargo run --release
```
If everything is working correctly, you should see the same two buttons as before, but this time with a placeholder image laid out behind it:
![[Slideshow Placeholder.png]]
## What's next
In this step, we created the `Slideshow`.
We now have an initial implementation of a slideshow. It's still very limited — it only displays a placeholder image, and doesn't respond to user events yet.
In the next few steps, we'll remove these limitations and make the slideshow dynamic.