Dynamic Slideshow

Collection

​

We added a DynamicSlides database collection to our site. The collection contains text, links, and images to display in the slideshow.

Page Elements

​

We added a full-width slideshow to our Home page:

• The slideshow has 4 slides, to display 4 items from the collection.

• Each slide has a background image, button, and 2 text elements.

• Note that the IDs for slides in a slideshow are always slide1, slide2, etc. Slide IDs can’t be viewed or changed in the Properties panel.

• We gave each element type (for example, button) the same ID in each slide, followed by an index number starting at zero corresponding to the element’s slide. For example, the button for slide1 has the ID slideButton0 and the button for slide2 is slideButton1. We used zero-based numbering for the element IDs since we’ll be assigning data using an array, which is zero-based.

Code

​

Then we added code to do the following:

1. When the page loads, query all the data in the DynamicSlides collection and assign it to a variable. The data is stored as an array of objects.

2. For each slide, use the current index to assign the queried data of each item in the collection to the corresponding slide’s elements.

Notes

​

• Background images are assigned directly to the slide’s background.src property, as opposed to text, button text, and button links, which are assigned to elements in the slide.

• We used template literals to work with the slide.id and index variables as strings.