There are four components to this Slideshow: 1. The !Slides layer for your images. 2. The large Placeholder for displaying the 'Slideshow'. 3. The small Placeholder for adjusting the 'Slideshow Setup'. 4. The Page HTML Head for the CSS running the Slideshow. Changes: 1. Open the !Slides layer and add your seven pictures. a. As large as you wish. b. Ensure all have the same Image Filename of 'slide'. c. Hide the !Slides Layer. 2. You only need touch 'Slideshow' (Placeholder Body) when you are changing the number of slides being presented. a. You can resize the Placeholder big to small as you need. b. Aim for the same aspect ratio as your pictures.

This could be on your Variant page:

3. The 'Slideshow Setup' allows you to adjust: a. The number of slides (NOTE: this requires major undertakings elsewhere). b. How long a slide is shown. c. How long a slide takes to be replaced. d. The aspect ratio of your pictures in width and height. e. How the active Thumbnail is presented. f. The colour of the Play/Pause button (top-left). 4. Only touch the CSS (Page Head) when changing the number of images. a. There are a few other tweaks there require competence in CSS.

Adding more Pictures: !Slides • Add as many pictures as you like. 'Slideshow Setup' • change --slides number to the total of your slides 'Slideshow' • Add new lines that increment: o <input type="radio" id="p7" name="select"> o <img id="pic7"> Page Head • Add a new line and increment the following: o --p7: url(index_htm_files/slide-6.jpg); o #p7:checked ~ #frame {--current:6;} o #p7:active ~ #frame {background- image:var(--p7);} o #pic7 {content:var(--p7);} o #p7 {background-image:var(--p7);} o #p7:hover ~ #frame b {background- image:var(--p7);} • Check and recheck.