# 3.2. Slider

The **Slider** widget is a tool that allows you to display a series of images, videos, or content in a horizontal or vertical sliding format. This is an effective way to capture users' attention and present a lot of information in a limited space.

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

## **1. Add Slider to the landing page**

* Click on **Widgets** in the sidebar of the editor.
* Select **Slider** from the **Media** section.
* Choose the **Slider** element and drag it onto your landing page.

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

## **2. Slider Editor**

### 2.1. Content Editor

To access the **Content Editor**, click on the **Slider** widget you wish to modify on the screen and select **Content** from the quick settings bar.

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

* Click **"+ Add"** to add a new slider element.
* Click and drag to move slider elements.
* Click the icon <img src="/files/UIclvhBMl64Kt0DkPKNe" alt="" data-size="line"> on each slide to access settings: Duplicate, Set as default, Rename, Content, Delete.

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

### 2.2. Design Editor

To access the **Design Editor**, click on the **Slider** widget you wish to modify on the screen and select **Design** from the quick settings bar.

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

* **Align:** Helps you align the Slideshow within the container, see details [<mark style="color:blue;">**here**</mark>](/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/align.md).
* **Sizes:** In the design editor, allows you to adjust the size and position of elements on the website, see details [<mark style="color:blue;">**here**</mark>](/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/size.md).
* **Display on:** Allows you to control the display of the Slider on different devices, including Desktop and Mobile.
* **Styles:** Customize the background color and shadow effects for the entire slider or specific slides within it, see details [<mark style="color:blue;">**here**</mark>](/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/styles.md).
* **Border:** Allows you to add and customize the border around the Slider, and you can also adjust the border radius, see details [<mark style="color:blue;">**here**</mark>](/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/border.md).
* **Slider settings:** Allows you to customize settings related to the display and functionality of the slider.
  * **Transition Direction:** Determines the movement direction of the slides during transitions: left to right, right to left, bottom to top, top to bottom.
  * **Transition Duration:** Adjusts the time for the transition effect between slides.
  * **Perview:** Determines the number of slides displayed simultaneously in the slider's viewport.
  * **Spacing:** Adjusts the spacing between slides.
  * **Infinite loop:** Allows the slider to automatically repeat when it displays the last slide.
  * **Autoplay:** Automatically runs the slider without user interaction.
  * **Time on each item:** Sets the display time for each slide before moving to the next slide (only applies when Autoplay is enabled).
  * **Gap:** Sets the distance between slides in the slider.

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

* **Thumbnails:** Displays small preview images below or next to the default slider, allowing users to preview and select the slide they want to view.
  * **Enable:** Displays thumbnails in the slideshow.
  * **Perview:** Specifies the number of thumbnails displayed simultaneously in the thumbnail area.
  * **Vertical:** Sets the orientation of thumbnails (vertical or horizontal).
  * **Loop:** Allows thumbnails to loop as users scroll or navigate through them.
  * **Spacing:** Adjusts the gap between thumbnails.
  * **Width:** Adjusts the width of the thumbnails.

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

* **Dots:** Help users identify the number of slides and which slide is currently being displayed in the slider.
  * **Enable/Disable:** Allows you to turn the dot indicators on or off. When disabled, the dots will not be shown.
  * **Basic:** Customize general settings for the basic, unselected dot indicators.
    * **Width:** Adjust the width of the dots (unit: px). Increase or decrease the size to fit your design.
    * **Height:** Adjust the height of the dots (unit: px) to ensure balance with the slider's interface.
    * **Background:** Select a background color for the dots. You can use a color palette or input a custom color code.
    * **Border:** Customize the border and corner radius of the dots.
  * **Selected:** Allows customization of general settings for the selected dot indicator.
    * **Background:** Select a background color for the dots. You can use a color palette or input a custom color code.
    * **Border:** Customize the border and corner radius of the dots.

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

* **Button:** Enable/disable and customize the navigation buttons (left/right) for the slider.

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

### 2.3. Advanced Editor

To access the **Advanced Editor**, click on the **Slider** you wish to modify on the screen and select **Advanced** from the quick settings bar.

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

* **Animation**: Allows you to add dynamic animations to the widget on your landing page to make it more attractive and lively, see details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/animation).
* **Desktop/Mobile sync design**: Allows you to set synchronization options for the design between desktop and mobile, see details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/desktop-mobile-sync-design).
* **Position type**: Lets you choose the appropriate positioning style to optimize the webpage and provide the best experience for users, see details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/position-type).
* **Custom advance**: Allows you to customize the appearance and behavior of the component using CSS layers and custom CSS code, see details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/custom-advance).


---

# Agent Instructions: 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:

```
GET https://docs.shopone.io/english/basic-elements/media-widgets/slider.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.