> For the complete documentation index, see [llms.txt](https://docs.maker.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.maker.co/maker-pages/advanced-features/how-to-create-a-slider.md).

# How to create a slider

<figure><img src="/files/rQm9w1xeldC6q649Ecmo" alt=""><figcaption></figcaption></figure>

Creating an Element Slider

Customizing the Slider

Section Sliders

With Maker you can crate three different types of sliders- an Element Slider, Image Grid Slider and Section Slider.

### Creating an Element slider

Start by adding a slider layout from the Media Panel. Next, with the grid selected, click on "Add Elements" option from the right side contextual panel.

Add images, textboxes, video and embeds like form etc.To add products, search for the product using a URL or via the Google product feed that is integrated with Maker and click to add the products to the new layout.

To re-order the elements, drag the elements up or down on the contextual panel, and to delete, simply click on the trash icon on the contextual panel.

This layout lets you switch between grid, list and slider view on breakpoints. To learn more about Element Layouts, click here .

<figure><img src="/files/6ONwT9YkCRkau8fdLY1s" alt=""><figcaption></figcaption></figure>

### Customizing your Element slider

After you've created your slider, you can customize the slider using the contextual panel on the right. You can control the following features: mode, slider height, slider width, slides to scroll, dots, arrows, loop, autoplay, transition and transition speed. In addition, you can customize the arrows and dots that appear for the slider including their on hover appearance.

Note : If you are considering adding a hover effect, it needs to be added on the desktop breakpoint.

Note : For Slider Mode, using center looks best when all of the images or elements in the grid have the same aspect ratio.

<figure><img src="/files/1HGLgjeOujpV7HlInvzs" alt=""><figcaption></figcaption></figure>

### Section Slider

With the Section Slider you can convert a section, Auto Grid layout, and an Advanced Grid layout into a slider. Section Sliders is not limited to a specific layout type - you can combine different layots based on your design and turn them into a section slider. All features supported for that layout type are supported in the slider.

Once your grids are ready click on the Layers tab on the media panel on the left and select the grids that will be converted into a slider.

To select the grids on the Layer tab, please use the keyboard controls on your device. (If you're working on a Mac, select CMD before selecting the grids with your mouse. If you're working on a PC, select CTRL before selecting the grids with your mouse.)

Once the girds are selected you will see an option on the right-side panel where you will simply click ‘Create Section Slider’

Note : The sections don’t need to be stacked next to each other in the editor to be combined into a slider.

Once the Section Slider is created, you will see various options in the contextual panel on the right for turning on full width, auto play, and navigation for your section slider. As a reminder, Navigation is set to ON by default.

Note : To turn on/off visibility of a Section Slider, use the visibility icon found next to the section slider on the layers panel instead of turning off the visibility of each individual slide. Once you've made your selection, click on Done.

<figure><img src="/files/ruYIjgNoRiIG8OuO0CE1" alt=""><figcaption></figcaption></figure>

### Making Edits to Section Slider

Once the section slider is created, the slides are no longer editable.

To make any edit to the section slider, select “Edit Section Slider” on the right-side panel. The slider converts back to editable grids and you can proceed to make edits. Once all edits have been made, just click DONE on top of the screen and the sections will then return back to the Section Slider state.

{% hint style="info" %}
Note: If you want to add or delete slides from a section slider, then delete the section slider using the "Delete Section Slider" option on the contextual panel, and recreate it again with the new sections added or removed.
{% endhint %}

<figure><img src="/files/a1PUM6BlStCQOUKYO6JQ" alt=""><figcaption></figcaption></figure>

### Customizing your Section slider

After you've created your section slider, you can customize the slider using the contextual panel on the right. You can control the following features: mode, slider height, slides to scroll, dots, arrows, loop, autoplay, transition and transition speed. In addition, you can customize the arrows and dots that appear for the slider including their on hover appearance.

{% hint style="info" %}
Note: If you are considering adding a hover effect, it needs to be added on the desktop breakpoint.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.maker.co/maker-pages/advanced-features/how-to-create-a-slider.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
