Dynamic Slideshow

Content

Populate a slideshow with database content.

Play with the example below to see what you can do:

Open this example as a template so you can see how everything works in the Editor. 

What We Built

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:

  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.

Example Code

arrow&v

Example Demonstrates

Database Collections

Slideshow

wix-data API

Editor Element APIs

To start using Corvid:  Go to the Wix Editor > Dev Mode > Turn on Dev Mode