Change Layout

Interactions

Change a layout using a slideshow.

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. 

This example demonstrates how to use a slideshow element to design multiple layouts on different slides and change the slides using code.

To use a slideshow for changing layouts, you need to turn off the autoplay feature (in Settings). Then, turn off the navigation arrows and slide buttons (in Layout).

In the top section, we use a slideshow element and a button element to demonstrate the theory behind changing from a list layout to a gallery layout. The slideshow has two slides. One slide contains the elements for the gallery and a button to change the layout to a list layout. The other slide contains the elements for the list and a button to change the layout to a gallery layout. When either button is pressed, the button’s onClick event handler switches the layout.

In the bottom section, we use a slideshow to simulate tabs that are used to switch between layouts. Here, the slideshow element contains the content for both layouts, but not the buttons. That means we need to use the onClick event handlers of the buttons to switch between slides and to enable and disable the buttons that hide and show the different layouts.

Next Steps

  1. Open this example in the Editor to work with the template.

  2. Publish the site.

  3. Learn how to work with examples in Corvid.

Example Code

arrow&v

Example Demonstrates

Enable & Disable

Slideshow.changeSlide

Hide & Show

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