> For the complete documentation index, see [llms.txt](https://docs.shopone.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.shopone.io/english/basic-elements/media-widgets/slider.md).

# 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).