Slider elements

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

1. Create a Slider navigation custom style by using the Button custom style type. For more information, see Creating custom styles

Slider elements

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

1. Create a Slider navigation custom style by using the Button custom style type. For more information, see Creating custom styles

Step 2 - Add a slider container to your layout canvas

1. Add a Slider container element to your Layout canvas

Step 3 - Apply your slider navigation and pagination styles

1. Double click on the Slider container to edit its settings
2. 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

1. Add a Slide element to your Layout canvas within your Slider container
2. Double click on the Slide to edit its settings. For more information, see Slide element.

Step 5 - Add content to your slide

1. Add content and layout elements to your Slide.

Step 6 - Duplicate your slide

1. On your Slide, click on the ...ellipsis button and then click Duplicate
2. Repeat this 3 more times to give you a total of 5 slides
3. 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

1. Click Save
2. 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.

Step 2 - Add a slider container to your layout canvas

1. Add a Slider container element to your Layout canvas

Step 3 - Apply your slider navigation and pagination styles

1. Double click on the Slider container to edit its settings
2. 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

1. Add a Slide element to your Layout canvas within your Slider container
2. Double click on the Slide to edit its settings. For more information, see Slide element.

Step 5 - Add content to your slide

1. Add content and layout elements to your Slide.

Step 6 - Duplicate your slide

1. On your Slide, click on the ...ellipsis button and then click Duplicate
2. Repeat this 3 more times to give you a total of 5 slides
3. 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

1. Click Save
2. 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.