top of page
Dynamic Slideshow

Dynamic Slideshow

Populate a slideshow with database content.

Intermediate.png

Intermediate

12K

Published:

January 1, 2020

Girl Enjoying her Drink

by

Anchor 1
Hire a Developer

Example Description

We built a full-width slideshow dynamically populated with content from a database collection.

Example Code

Tab 1

.

Tab 2

.

Tab 3

.

This code solution can be complicated.

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:

  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.

APIs We Used

Non-code example.

Non-code example.

Non-code example.

Related Articles

Hire a Developer

Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.

Related Examples

Did this help?

Yes

|

No

Thanks for your feedback!

Checkbox Dropdown

Checkbox Dropdown

Search a site using multiple filters.

Intermediate.png

Advanced

Search a Database

Search a Database

Let visitors quickly search your site content.

Intermediate.png

Intermediate

Change Layout

Change Layout

Change a layout using a slideshow.

Intermediate.png

Beginner

Anchor 2
bottom of page