# Image with slider

<div data-full-width="true"><figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2Fa5w6LQkUFhLWSt58jhjP%2FHelp%20Center%20banner%20%201250%20x%20200-2.png?alt=media&#x26;token=ab0daf12-b917-4435-a603-9a3f6613f853" alt=""><figcaption><p><a href="https://foxecom.com/pages/affiliate?utm_source=minimog%2Bhelp%2Bcenter&#x26;utm_medium=banner&#x26;utm_campaign=foxaffiliatelaunch2024">Explore FoxEcom Affiliate Program now </a><span data-gb-custom-inline data-tag="emoji" data-code="2728">✨</span></p></figcaption></figure></div>

{% embed url="<https://youtu.be/5On_Pu-fcFg>" %}

**Image with slider** is useful when you want to display several images but have limited space. This draws more visitors to your site.

![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FLnVLtAyoc6MD7fIsqP5t%2FScreen%20Shot%202021-10-19%20at%2020.10.41.png?alt=media\&token=ba75da28-d73a-4661-820b-e321b70fa4b2)

## How to create an Image with slider

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Add section**
2. Locate **Image with slider**
3. **Save**
   {% endhint %}

## Section settings

### Section header and General

Use the provided text fields to add a suitable **Heading**/**Subheading**. Leave any of them blank if you do not want to display them. Adjust the **Heading size** (Medium/Large) and **Text alignment** (Left/Center) based on your requirements.

You can select the section **Container type** and **Color scheme**.

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FLM7AkUI9VyhcreA4UKa0%2Fimage.png?alt=media&#x26;token=1d1c7052-ae1e-4381-9dcd-0dc548a81363" alt=""><figcaption></figcaption></figure>

There are 2 layouts (Layout 1/ Layout 2) for this section, you can choose the one that suits your theme.

For example:

{% tabs %}
{% tab title="Layout 1" %}

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FbJw6ld05XZhbsJleEviF%2Fimage.png?alt=media&#x26;token=e13833a5-48c5-4453-99ab-d3583ea8466c" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Layout 2" %}

<figure><img src="https://lh7-us.googleusercontent.com/ow1YTW2QOXd9fRYjKCfH2jTAFIV3Gn1k1GHuKj0rz9sYyfbvaD8_hfU05FPq-_OkgeO7WnVzVzDBi-HR1qDsPc8axtfH-IMZe-t7279l9CQKDkttkSdGdIdfr4JQEbGU5h7UCBUDfqfiq8b-1I40BBA" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Slider

Enable/ disable auto-rotate sliders.&#x20;

The duration time between each slide is 2-10 seconds.

![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2F2P1MlokrI36QvWsrRIPB%2FScreen%20Shot%202021-10-19%20at%2020.16.48.png?alt=media\&token=2a83c964-1538-4414-baae-ff7b3e795cea)

### Banner

There are 3 banners in total to display divided into both sides of the slider.&#x20;

This is where you can add the preferable image, enable call-to-action buttons and modify the button's size and style.

![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2F0qXprj1jxYrgnPuBVxzF%2FScreen%20Shot%202021-10-19%20at%2020.17.58.png?alt=media\&token=95133fb9-6983-4978-831f-b2f7da249351)

## Block settings

### Image and Content settings

Add images for the slider and insert text for heading/subheading/description.

![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FtcGq8SYIK8t5sv8czGXQ%2FScreen%20Shot%202021-10-19%20at%2020.22.41.png?alt=media\&token=59c9a529-874a-4224-af6c-a38be63a406a)

### Button settings

Add call-to-action buttons and adjust their style, size, and links if needed.

![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FF6MApRF1OkbnKXFLGOGN%2FScreen%20Shot%202021-10-19%20at%2020.22.54.png?alt=media\&token=2a0dcfc1-0daf-4f30-a496-fbd4a549b043)