Wix Studio Tutorial 2024 – How to create a Slideshow with different layouts and Automatic Slid

In this Wix Studio Tutorial, I will teach you how to create a beautiful slideshow. These slideshows have different layouts and change slides after a definite time.

The best part about this method is that you can use different elements and designs for each slide, add amazing animation on the slide or individual elements, and have the freedom of adding as many slides as you want.

So without further delay, let’s get started.

Types of Slideshows in Wix Studio and where to use them

Although there are many ways to create slideshows in Wix Studio, In general, three methods are unique.

1. Slideshow Repeaters

2. Flexbox Slides and Sliders

3. Multi-State Box Slideshow

The slideshow repeater is good when you want to show the same layout across different slides. Each slide in the Slideshow repeater has the same layout but different assets(Title, Image, etc).

Here is a tutorial on How to add a Slideshow repeater in Wix Studio –

Wix Studio Tutorial 2023 – How to Add a Slideshow

The second type is using Flexbox. This type of slideshow is great when you want to show different layouts on each slide. Flexbox allows slides to have their own unique design, animation, and assets. All slides in Flexbox are independent of each other.

You can add buttons, text, vector shapes, or a scrollbar, to navigate across the slides.

Here is a tutorial on How to use Flexbox as a slider in Wix Studio-

Wix Studio Slideshow Repeater Tutorial 2024 – How to Use Different Layouts for Each Slider

And finally, we have the most advanced type in the drag-and-drop builder, the multi-state box. Wix Studio Multi-State Box allows users to create containers or boxes each with its own design, animation, and website assets.

The multi-state box is better when working with code and complex elements and designs.

Our interest in this tutorial is in multi-state boxes as well. So how do we create a slideshow using the multi-state box, Let’s find out in the next section.

My Wix Affiliate Link

Steps to create Slideshow in Wix Studio using Multi-State Box

1. Add a Multi-State Box in a section and resize it.

After adding an empty section, First, you need to go to Wix Studio Layout tools and add a multi-state box. After that resize the multi-state box as per your needs.

1. Design individual Boxes or Slides of multi-state box

Now you can select the box or slide from the layer panel and edit them however you want. Design each box with the elements you want to show on the slide. Furthermore, you can also add animation and intersection on each element. All slides are independent of each other.

1. Add more boxes if needed

If you need more slides, you can add more boxes in the multi-state box. You can add as many slides as you want. However, My personal recommendation is 4 maximum slides. To add more slides, go to the layer panel, select the multi-state box, click on manage states, and add new states that duplicate any of the pre-built ones(if you want to use the same design)

1. Turn on Developer mode

Once you are satisfied with the design and animation of all boxes, its time to add a simple piece of code. To add the code, you need to first engage the developer mode. In fact, you should do it at the very beginning of the design as it gives you more elements to work with.

1. Add a simple Velo Code to create a Slideshow transition

To create the slideshow transition among the slides, we need to add a small code on the page. The code is given in this post. You just have to replace the Element ID of the box and set the time between the transition.

1. Check the Preview and Publish the Website

Now your Slideshow Design is complete. You can check the slideshow preview and make adjustments to the assets, animations, and design. Once satisfied, publish the website.

Velo Code to make the Wix Studio slideshow

The following code is for creating a Slideshow in Wix Studio. Replace the “var states” value(‘box58’, ‘box59’, ‘box63’) with the element ID of your multi-state boxes. In the timeout section, set the time between the transition of two slides.

$w.onReady(function () {
    var states = ['box58', 'box59', 'box63']; 
    var stateNumber = 0;

    function slideShow() {
        $w('#multiStateBox1').changeState(states[stateNumber]);
        if (stateNumber < states.length - 1) {
            stateNumber++;
        } else {
            stateNumber = 0;
        }
        setTimeout(slideShow, 8000);
    }
    slideShow();
}); 

Final Thoughts

I hope this tutorial will help you create beautiful slideshows in Wix Studio using Multi-State Boxes. Make sure to check out more tutorials on my YouTube channel.

You can also support me on Patreon or via Wix Affiliate Links on my blog.

My Wix Affiliate Link

Buy Me a Coffee

Best Regards

#howtodesignwebsiteusingwixstudio #howtousewixstudio #WixStudio #wixstudiotutorial