Max Addons' Background Slideshow feature is a great way to create stunning image background slideshows. With this feature, you can easily add a slideshow with multiple images to any Section or Container on your website.
Here's how you can set up and customize a background slideshow on your Bricks Builder site:
Note: Background Slideshow feature will not appear in the live editor. To see the slideshow in action, you’ll need to save your changes and click the Preview mode button.
How to Use the Background Slideshow Feature#
1. Create a New Page#
First, open the page where you want to add the background slideshow.
2. Add a Section#
Then, add a Section or Container where you want the slideshow to appear. You can also add any Element within the container to apply a slideshow background to those elements.
3. Go to the Style Tab#
After adding the Section element:
- Click on the STYLE Tab.
- Scroll down until you spot the BACKGROUND SLIDESHOW option.
- Make sure to check the "MAX" tag.
If you want to add the background slideshow to the Container element, follow the same steps as above.
4. Enable the Background Slideshow#
Toggle the option to enable the Background Slideshow.
5. Add Images#
Next, choose the images you want to include in the slideshow. You can add multiple images to create a dynamic background.
6. Define the Background Size#
Once you add images, you can choose how your images should fit the background by selecting a size option: Contain, Cover, Fill, or Scale Down.
7. Select the Background Position#
You can also decide where to position the images within the section; options include Top Center, Center Left, Bottom Right, and more.
8. Customize the Slideshow Settings#
Furthermore, you can adjust the slideshow's speed, choose the transition type between images, and set the transition duration.
9. Enable Loop, the Ken Burns Effect & Pause on hover#
If you want the slideshow to keep playing on a loop, just turn on the Loop option.
You also have the option to enable the Ken burns effect, which gives your images a smooth zooming motion. You can also choose the direction of the effect (in or out).
Moreover, you can enable the Pause on hover option to pause the slideshow animation when users hover over the section or container.
10. Save and Preview#
Once you’ve customized your settings, click Save and Preview your page to see the slideshow in action.
And that's it! With these simple steps, you can create a beautiful background slideshow that makes your website stand out.