Example Description
We built a full-width slideshow dynamically populated with content from a database collection.
How We Built It
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:
-
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.
-
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.
Related Examples
Did this help?
|
Thanks for your feedback!
Checkbox Dropdown
Search a site using multiple filters.
Advanced
Search a Database
Let visitors quickly search your site content.
Intermediate
Change Layout
Change a layout using a slideshow.
Beginner