---
title: "19 – Carousel"
slug: "19-carousel"
updated: 2024-07-11T15:07:34Z
published: 2024-07-11T15:07:34Z
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mapp.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 19 – Carousel

## Description

This block consists of a carousel of images that can display up to 4 images and apply thumbnails or different slide tabbing options. Left and right arrows can be hidden if desired. The client needs to add a static fallback image where devices are incompatible. Like the Video and carousel blocks, asset provision is important.

## Default block view

**Desktop**

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/3f851ef6-7299-4040-838b-53407590f669.png)

**Mobile**

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/e91b788a-e3c3-44da-8426-151a221b6f52.png)

## Formatting options

### Padding

This refers to the space between the block's content and its border. This can be edited in the **Details Tab**.

| **Option** | **Details** | **Default** |
| --- | --- | --- |
| Padding | Top | 10 |
| Right | 0 |
| Bottom | 10 |
| Left | 0 |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/19841b23-297b-47fb-98e8-0362039d060f.png)

### Number of images

Select up to four carousel image placements.

| **Option** | **Details** | **Default** |
| --- | --- | --- |
| Number Of Images | - 2 - 3 - 4 | 4 |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/1413e304-67f9-4de9-8fb1-cf26bed96052.png)

### Thumbnail option

Use the drop-down to select 1 of 4 thumbnail style options.

| **Option** | **Details** | **Default** |
| --- | --- | --- |
| Thumbnail | - Dots - Dots and Numbers - None - Thumbnails | Dots |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/fd659103-109c-4893-b872-78b33a9d8bb2.png)

### Hide/Show

Used to select to hide or show the scroll arrows.

| **Option** | **Details** | **Default** |
| --- | --- | --- |
| Hide/Show | Scroll Arrows | Show |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/dadf48ee-f912-4f8b-be9d-dd1c07bc433a.png)

### Block Background Color

Used to change the block background color. Only use HEX color values. HTML email only recognizes 6-digit long-hand versions and has patchy support for shorthand versions.

| **Option** | **Details** | **Default** |
| --- | --- | --- |
| Background Color | Block Background Color | #ffffff |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/c984a3bf-f37c-4a70-9ae3-0c7da875f8a1.png)

### Scroll Arrows Color

Apply a color to the scroll arrows

| **Option** | **Details** | **Default** |
| --- | --- | --- |
| Scroll Arrow Color | Scroll Arrows Color | #ffffff |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/bdb0f512-6dce-4d10-b6af-217f0df8b101.png)

### Fallback Image

Upload a fallback image to the Content Store, then add the URL to the Fallback image field in the **Details Tab**.

| **Option** | **Details** | **Default** |
| --- | --- | --- |
| Image | Fallback Image | https://dummyimage.com/600x320/fff/aaa |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/1296f589-c174-46f5-b2aa-ec54c7ad17ca.png)

### Scroll Images

Change the scroll and thumbnail images.

| **Option** | **Details** | **Default** |
| --- | --- | --- |
| Image | Slider Image | https://dummyimage.com/600x320/fff/aaa |
| Thumbnail | Thumbnail Image | https://dummyimage.com/600x320/fff/aaa |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/1cd2858f-a6b3-4bee-ad25-73769ccb1ccb.png)

### Links

It allows you to add the link to the images.

| **Option** | **Details** | **Default** |
| --- | --- | --- |
| Links | Image 1 | [https://www.example.com](https://www.example.com/) |
| Image 2 | [https://www.example.com](https://www.example.com/) |
| Image 3 | [https://www.example.com](https://www.example.com/) |
| Image 4 | [https://www.example.com](https://www.example.com/) |
| Fallback Image | [https://www.example.com](https://www.example.com/) |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/1dfdd186-b0bc-4c2e-98ec-ed6c5fd201a0.png)

## Compatibility

As mentioned with the Video block, there is limited support, but applying a fallback asset for all incompatible devices will bridge the gap.

## Interactive view

| **Desktop** | **Mobile** |
| --- | --- |
| ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/6a7491cb-7e84-4555-b7f5-5181d362d333.png) | ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/e91b788a-e3c3-44da-8426-151a221b6f52.png) |

## Fallback view

| **Desktop** | **Mobile** |
| --- | --- |
| ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/6d4ed497-793a-450e-b10c-284fd99bebb7.png) | ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/2dc941b9-9fca-466b-90fa-24e2616b3f69.png) |