Change Layout

Change a layout using a slideshow.

Code Level

Beginner

Published

 

Example Description

In this example site visitors can change a layout using a slideshow.

Example Code

How We Built It

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.

APIs We Used

Related Articles

Related Examples

Add to Cart Gallery

Let customers to add products to their cart

INTERMEDIATE

Hide and Show Elements

Hide and show elements in response to user interactions

BEGGINER

Hide and Show Elements

Hide and show elements in response to user interactions

BEGGINER