---
title: "Slider elements"
date: "2017-11-12T15:42:10+00:00"
summary: "Create interactive sliders effortlessly with Site Studio's slider elements. Learn how to compose, style, and configure sliders step-by-step for engaging, dynamic content on your website."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/slider-elements"
id: "b4172e15-1c0f-4391-a9ae-58edfbc3ad8d"
---

Table of contents will be added

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.

![d6624daa-Slider-structure.png](https://acquia.widen.net/content/953425a6-f51b-4a85-b6bd-78378176dfb7/web/d6624daa-Slider-structure.png)

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](/drupal-starter-kits/add-ons/site-studio/creating-custom-styles "Creating custom styles")
2.  Create a **Slider pagination** custom style. For more information, see [Creating custom styles](/drupal-starter-kits/add-ons/site-studio/creating-custom-styles "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](/drupal-starter-kits/add-ons/site-studio/slider-container-element "Slider container element").

### 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](/drupal-starter-kits/add-ons/site-studio/slide-element "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](/drupal-starter-kits/add-ons/site-studio/slider-container-element "Slider container element") and [Slide element.](/drupal-starter-kits/add-ons/site-studio/slide-element "Slide element")