# Image with slider

<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://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-10-19%20at%2020.10.41_DntQAMRp.png)

## How to create an Image with slider

<Hint type="success">

Steps

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

</Hint>

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

![image](https://docs-assets.foxecom.app/minimog-theme/image_zowqJAAd.png)

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">

![image](https://docs-assets.foxecom.app/minimog-theme/image_PKlZbMbc.png)

</Tab>

<Tab title="Layout 2">

![image](https://lh7-us.googleusercontent.com/ow1YTW2QOXd9fRYjKCfH2jTAFIV3Gn1k1GHuKj0rz9sYyfbvaD8_hfU05FPq-_OkgeO7WnVzVzDBi-HR1qDsPc8axtfH-IMZe-t7279l9CQKDkttkSdGdIdfr4JQEbGU5h7UCBUDfqfiq8b-1I40BBA)

</Tab>
</Tabs>

### Slider

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

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

![](https://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-10-19%20at%2020.16.48_klQ9PqEC.png)

### 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://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-10-19%20at%2020.17.58_wBE9AKyS.png)

## Block settings

### Image and Content settings

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

![](https://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-10-19%20at%2020.22.41_jtcdc71b.png)

### Button settings

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

![](https://docs-assets.foxecom.app/minimog-theme/Screen%20Shot%202021-10-19%20at%2020.22.54_c4fWFJ7V.png)