Create an Engaging Dynamic Slideshow with Database Content in the Wix Editor

A slideshow is a powerful way to showcase important content or visuals on your website's homepage. But why settle for static images when you can create a dynamic slideshow that automatically pulls data from a database? This is a great solution to showcase ever-changing content, like featured products, new arrivals, or portfolio pieces. In this post, we’ll guide you through building a dynamic slideshow that updates with data from a Wix database collection. Let’s dive in!

Why Use a Dynamic Slideshow?

A dynamic slideshow ensures your content stays fresh and up-to-date without manual editing. Connecting your slideshow to a database allows you to automatically pull in new text, images, and links as your collection grows. Whether you're showcasing events, properties, or any type of visual content, a dynamic slideshow is a smooth and efficient way to display it.

The Setup: Database and Slideshow

First, we need to set up our database collection. For this example, we’ve created a collection called DynamicSlides that contains the following fields:

• Title: Text field for the title of each slide.

• Description: Text field for a brief description.

• Button URL: Link field for a call-to-action button.

• Slide Background: Image field for the background image of each slide.

Next, we add a full-width slideshow element to our Home page. The slideshow will display four slides, each populated with data from our collection.

Each slide contains:

• A background image.

• A title and description (text elements).

• A button that links to a specific page.

To keep things organized, we assign the same element IDs to each corresponding slide, but this time we'll use 1-based numbering. For instance, the button for slide1 is called slideButton1, while the button for slide2 is slideButton2.

The Code: Populate the Slideshow from the Database

Now, let’s look at the code that brings everything to life. This code queries the database, retrieves the slide data, and assigns it to the slideshow elements.

import wixData from 'wix-data';

$w.onReady(async function () {
	let slidesData = await getSlideshowDataFromDatabase();
	loadSlideshowData(slidesData);
});

function loadSlideshowData(slidesData) {
	const slideElements = $w("#dynamicSlideshow").slides;
	slideElements.forEach((slide, index) => {
		$w(`#${slide.id}`).background.src = slidesData[index].slideBackground;
		$w(`#slideTitle${index + 1}`).text = slidesData[index].title;
		$w(`#slideDescription${index + 1}`).text = slidesData[index].description;
		$w(`#slideButton${index + 1}`).link = slidesData[index].buttonUrl;
	});
}

function getSlideshowDataFromDatabase() {
	return wixData.query("DynamicSlides").find().then(results => {
		return results.items;
	});
}

How It Works:

1. Database Query: When the page loads, the code queries the DynamicSlides database collection and stores the results in an array.

2. Loading the Data: For each slide in the slideshow, the code uses the index to assign the data (background image, title, description, and button link) to the corresponding elements.

3. Dynamic Assignment: Each slide’s background image is assigned directly to the slide's background.src property, while the text and button links are assigned to their respective elements.

Adding More Slides

If you want to add more slides to your dynamic slideshow, it’s a breeze! Here’s how:

1. Expand the Database Collection: Add more entries to your DynamicSlides collection. Each entry should include the slide title, description, background image, and button link. The slideshow will automatically pull data from all the entries in the collection.

2. Add More Slides to the Slideshow: In the Wix Editor, add more slides by duplicating the existing slides. You can do this directly within the slideshow element.

3. Update the Code (if needed): Since the code dynamically handles data assignment based on the slide count, it will automatically apply the database content to any additional slides you add. Make sure that each slide element follows the numbering convention—use slideButton5, slideTitle5, etc., for a 5th slide, and so on.

Example: Adding a 5th Slide

• In the database, add a 5th entry with the necessary content.

• In the slideshow, add a 5th slide.

• Ensure that the elements within the new slide have IDs like:

  • slideButton5

  • slideTitle5

  • slideDescription5

The code will automatically map the 5th slide’s content from the database to these new elements, keeping your slideshow dynamic and scalable.

Key Points to Remember:

• Slide IDs: Slide IDs like slide1, slide2, etc., are fixed and cannot be changed in the Properties panel. However, individual elements within each slide can have custom IDs like slideButton1, slideTitle1, etc.

• 1-Based Indexing: We use 1, 2, 3, etc., for slide element IDs to keep things intuitive and easy to follow.

• Template Literals: We use template literals to dynamically construct the element IDs using both the slide.id and index values.

Enhancing Your Slideshow

This setup not only keeps your content dynamic and engaging but also gives you the flexibility to add more slides or fields in the future. By using a database, you make managing content simple, allowing you to focus on the creative side of your website.

At WIXCreate, we specialize in building powerful, dynamic websites that bring your brand to life. Whether you need a simple, elegant design or advanced functionality like dynamic content from databases, we’ve got you covered. As certified Wix Partners, we create fully customized websites tailored to your needs—without the hassle of coding. Let us help you take your website to the next level!

Ready to get started? Contact us today and let’s turn your vision into reality!