> For the complete documentation index, see [llms.txt](https://foxecom.gitbook.io/minimog-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://foxecom.gitbook.io/minimog-theme/theme-sections/image-with-slider.md).

# Image with slider

<div data-full-width="true"><figure><img src="/files/1OZ2q7N6tFYitFzBKwTz" 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.

![](/files/DntQAMRpbUkjwbbLtB5L)

## 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="/files/zowqJAAduD8M0LAsMwB3" 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="/files/PKlZbMbcr88uN9Y2nfZb" 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.

![](/files/klQ9PqEC0qBNdzo9FbDK)

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

![](/files/wBE9AKyStMNr7iffezVM)

## Block settings

### Image and Content settings

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

![](/files/jtcdc71b3YVXFigJWM0c)

### Button settings

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

![](/files/c4fWFJ7VuwxISgJ0gLfH)