Example Description
In this example site visitors can change a layout using a slideshow.
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
Open this example in the Editor to work with the template.
Publish the site.
Learn how to work with examples in Velo.
Related Examples
Did this help?
|
Thanks for your feedback!
Hide & Show Elements
Hide and show elements in response to user interactions.
Intermediate
Collapse Elements
Collapse and expand groups of elements.
Beginner
Hide and Show an Image
Show and hide an image according to the clicked button.
Beginner