The slider elements allow you to add an interactive slider to your layout.
How a slider is composed
A slider includes the following component parts:
- Slider container - The outer container which holds your slides
- Slider navigation - The buttons used to navigate between slides. These are set within the Slider container
- Slider pagination - Shows the number of slides and can act as navigation. This is set within the Slider container
- Slide - The slides which hold your content.
Creating a slider
The following steps illustrate the process of creating a simple Slider device.
Step 1 - Create your slider navigation and slider pagination styles
- Create a Slider navigation custom style by using the Button custom style type. For more information, see Creating custom styles
- Create a Slider pagination custom style. For more information, see Creating custom styles.
Step 2 - Add a slider container to your layout canvas
- Add a Slider container element to your Layout canvas
Step 3 - Apply your slider navigation and pagination styles
- Double click on the Slider container to edit its settings
- Select your Slider navigation and Slider pagination custom styles. For more information, see Slider container.
Step 4 - Add a slide item to your slider container
- Add a Slide element to your Layout canvas within your Slider container
- Double click on the Slide to edit its settings. For more information, see Slide element.
Step 5 - Add content to your slide
- Add content and layout elements to your Slide.
Step 6 - Duplicate your slide
- On your Slide, click on the ...ellipsis button and then click Duplicate
- Repeat this 3 more times to give you a total of 5 slides
- Edit some of the content within each slide item so that it's obvious when the slide changes.
Step 7 - Save and publish to finish
- Click Save
- View your page. You've now created a slider device with 5 slides.
Configuring the slider container and slide elements
The Slider container and Slide elements have many configuration settings. For more information on configuring them, see Slider container element and Slide element.