> For the complete documentation index, see [llms.txt](https://docs.antsomi.com/cdp-365-user-guide-en/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.antsomi.com/cdp-365-user-guide-en/marketing-hub/media-template/settings/blocks-and-settings/slide-show.md).

# Slide show

After inserting a block in Live Preview, you can configure the settings

<figure><img src="https://826840553-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbtU4vFUxT5JkWYHePuoX%2Fuploads%2FKDgobKTN1HGcmkgjtypw%2Fimage.png?alt=media&amp;token=34600143-b6f2-4fc5-b6af-d24375ade69c" alt=""><figcaption></figcaption></figure>

## Content

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfsOyK_1JWKaX-m5B0h9Yo1O84TT1Ohh0YJMItZgPI6s-jaw0NwpHjunsb9cjySa6qUHFXapKsH5SMqqb8R9nfFUpS7shL0MQot8PDQxYfssrTJNtJeOfrAPXDif8CHWYKqn1_J0moOK-Cut6x7ifEf7vY?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

### Slide show

#### Total items

Total slides in Slide show

#### Display items

Number of slides per view (slides visible at the same time on slider's container)

#### Display style

It allows you to adjust the display style (full, half)

#### Column gap

You can set the size of the gap between slides

#### Slide direction

It allows you to change the slide direction (horizontal, vertical)

#### Slide transition

There are a huge number of options that you can choose such as Slide, Fade, Cube, Flip, Cards, etc.

#### Number of next items

The number of slides will be skipped when the slide change transition

#### Auto slide

&#x20;Slide change transition automatically

* Slide delay (second): the slide will be delayed for a number of seconds until transition

#### Slide time&#x20;

Duration of transition between slides (in second)

#### Slide loop

You can change the status to enable/disable continuous loop mode

### Next & Previous Button

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXf23sEHrjXPlMB6X93e5z93uH0oze0-GD1Q7TuCHHzVEuTHq5caTE2m02LU_hQTBFzfP-peGlSPLigxbxfaXQmk0t_zH0AEv3IPsFWjt6k0QmzE9Nnr710kewKAb-FPIgEFKkamwpXy768Tq4nf9HTevkwD?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

#### Button Position

The position of the button (Middle, Top left, Top center, Top right, etc.)

#### Button Icon Color

It allows you to change the color of the button icon

#### Button Size

It allows you to change the size of the button in PX

#### Button Shape

It allows you to change the shape of the button (Circle, Square)

#### BG normal color

It allows you to change the background color of the button

#### BG hover color

It allows you to change the background color of the button&#x20;

## Advanced

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdD09EAKlqV3WpJStJLb_YZN-63CMsXbeVBAa8xZdJTdhtdW7K293NATmXe4-ts64y90UldqfGz77AdYaIyjZOXvvORYUKoKGEzsfCtcv8CmNcwj8i1m8OXcNXIn544_xxXyXm6hbK0Y_b2BWw5t2Sam2Bu?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

### Container Styling

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfkU-0rC76i6diZ1yAQ11l25PFDjo-RepD-MvBXBetXRPrOhazjBvwLLH9PaRm4Dc6JDz_a340iiC3M5XCfXGP0uV72pjvNIr32isIw2-_sveXZZOlxKB-ijLVUW0u6oOCVNjsLoDkzNVjEPneRYRLAA2o?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

#### **Style**

1. ***Solid***: Applies a single color uniformly within the whole of an object by selecting the ***Background color***
2. ***Gradient:*** It applies a continuous blend of two or more colors, where one color gradually fades and changes into another. You can choose the ***Gradient Style***:&#x20;
   * ***Linear***: Change the angle of the gradient
   * ***Radial***: Change the positioning (right center, left top, left center, etc)
   * ***First color & first color location***
   * ***Second color & second color location***

#### **Box Shadow**

It allows you to add shadow effects around an element's frame by selecting a shadow style (None, Light, Custom)

#### **Border**

It allows you to specify the style, width, and color of an element's border

#### **Rounded Corners**

It allows you to define the radius of an element's corners

#### **Spacing**

* ***Inner Spacing (Padding):*** \
  Padding is inside the border (or edge) of your element. Increasing the padding will “push” your content into the middle of your box, away from your borders. If you remove the padding, your content will take up the entire box
* ***Outer Spacing (Margin):*** \
  Margin is on the outside of the border of your element. If you increase the margin, it will increase the space between this element and the ones next to it. If you remove your margin, there will be no extra space between your elements

#### Position

It allows you to adjust the position of elements in the block

#### Z-Index

* The z-index property specifies the stack order of an element
* An element with greater stack order is always in front of an element with a lower stack order

#### Custom ID attribute

The ID of a block, which is used in ***Custom CSS, Custom Javascript***

#### Custom Class attribute

The class of a block, which is used in ***Custom CSS, Custom Javascript***

#### Hover Styles

You can configure the ***Hover Styles*** by turning off the status of ***Default Hover Styles***

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXebsM6xA2P9PGela40LRTZ-5zNPkh1UAravXSf2kWud9iOCshi7axEyGYuk08N-gN9xy9Ij_GjXW-eQ5nLx8rLBOqvdB0shIG280JwtGfpS6m3WpsfLT-wxc-Pb7Lgtkd3Rn5Wz9PDiEWxkQntmAI6oSsIJ?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

**a. Background**

1. ***Solid***: Applies a single color uniformly within the whole of an object by selecting the ***Background color***
2. ***Gradient:*** It applies a continuous blend of two or more colors, where one color gradually fades and changes into another. You can choose the ***Gradient Style***:&#x20;
   * ***Linear***: Change the angle of the gradient
   * ***Radial***: Change the positioning (right center, left top, left center, etc)
   * ***First color & first color location***
   * ***Second color & second color location***

#### **b. Box Shadow**

It allows you to add shadow effects around an element's frame by selecting a shadow style (***None, Light, Custom***)

#### **c. Border**

It allows you to specify the style, width, and color of an element's border

#### **d. Rounded Corners**

It allows you to define the radius of an element's corners

#### **e. Spacing**

* ***Inner Spacing (Padding)***: \
  Padding is inside of the border (or edge) of your element. If you increase the padding, it will “push” your content into the middle of your box, away from your borders. If you remove the padding, your content will take up the entire box
* ***Outer Spacing (Margin)***: \
  Margin is on the outside of the border of your element. If you increase the margin, it will increase the space between this element and the ones next to it. If you remove your margin, there will be no extra space between your elements

#### f. Position

It allows you to adjust the position of elements ịn block

#### g. Z-Index

* The z-index property specifies the stack order of an element
* An element with greater stack order is always in front of an element with a lower stack order

### Slide Styling

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfxgIRJ1suoeekIvwwbLco7u0bUmoaXvvKDIeSTKGDRWN-z6Wq5hqRniKXQ4e0CxT_W9MtnmteCi_W87rmGyS1qVvapJ5qvDkTr9ZfqfuuuDHIL8N0RIJrBC-C9iyJEuOwkOEjsE8XzO2xy6aYD-sEF4091?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

#### **Style**

1. ***Solid***: Applies a single color uniformly within the whole of an object by selecting the ***Background color***
2. ***Gradient:*** It applies a continuous blend of two or more colors, where one color gradually fades and changes into another. You can choose the ***Gradient Style***:&#x20;
   * ***Linear***: Change the angle of the gradient
   * ***Radial***: Change the positioning (right center, left top, left center, etc)
   * ***First color & first color location***
   * ***Second color & second color location***

#### **Box Shadow**

It allows you to add shadow effects around an element's frame by selecting a shadow style (None, Light, Custom)

#### **Border**

It allows you to specify the style, width, and color of an element's border

#### **Rounded Corners**

It allows you to define the radius of an element's corners

#### **Spacing**

* ***Inner Spacing (Padding):*** \
  Padding is inside the border (or edge) of your element. Increasing the padding will “push” your content into the middle of your box, away from your borders. If you remove the padding, your content will take up the entire box
* ***Outer Spacing (Margin):*** \
  Margin is on the outside of the border of your element. If you increase the margin, it will increase the space between this element and the ones next to it. If you remove your margin, there will be no extra space between your elements

#### Position

It allows you to adjust the position of elements in the block

#### Z-Index

* The z-index property specifies the stack order of an element
* An element with greater stack order is always in front of an element with a lower stack order

#### Custom ID attribute

The ID of a block, which is used in ***Custom CSS, Custom Javascript***

#### Custom Class attribute

The class of a block, which is used in ***Custom CSS, Custom Javascript***

#### Hover Styles

You can configure the ***Hover Styles*** by turning off the status of ***Default Hover Styles***

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXftKcvYbQr4HfKDiDNRRV3t2gaKq7jcaXGRZ5tnLOC9DuUp_ldlESpgi6u7hbnm0KGNGO7dNHx1EvoPbq4hL-Efez-GQ-BBfdjMGxZ8PrUuNiLlXWMoQbNc7vLeRo9Yphb3GBbjnbyl2OdPEyvymKaiIe4?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

**a. Background**

1. ***Solid***: Applies a single color uniformly within the whole of an object by selecting the ***Background color***
2. ***Gradient:*** It applies a continuous blend of two or more colors, where one color gradually fades and changes into another. You can choose the ***Gradient Style***:&#x20;
   * ***Linear***: Change the angle of the gradient
   * ***Radial***: Change the positioning (right center, left top, left center, etc)
   * ***First color & first color location***
   * ***Second color & second color location***

#### **b. Box Shadow**

It allows you to add shadow effects around an element's frame by selecting a shadow style (***None, Light, Custom***)

#### **c. Border**

It allows you to specify the style, width, and color of an element's border

#### **d. Rounded Corners**

It allows you to define the radius of an element's corners

#### **e. Spacing**

* ***Inner Spacing (Padding)***: \
  Padding is inside the border (or edge) of your element. Increasing the padding will “push” your content into the middle of your box, away from your borders. If you remove the padding, your content will take up the entire box
* ***Outer Spacing (Margin)***: \
  Margin is on the outside of the border of your element. If you increase the margin, it will increase the space between this element and the ones next to it. If you remove your margin, there will be no extra space between your elements

#### f. Position

It allows you to adjust the position of elements in block

#### g. Z-Index

* The z-index property specifies the stack order of an element
* An element with greater stack order is always in front of an element with a lower stack order

### Display Condition

You can set the condition to display the Slide show

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXc7Un1uudjGbMc_JE1zQpzbjbsvKy3KVpdeqODSkJmA-Clx-NBfkW8Em0AFiEVKatSW0pNmuwF9DXaeGMD-0E6gQRIaU85BRTdUX1iHdpLzkCAjzz_g29PWFveIemjnN5Tc0Pezq0LoKa_YrWJRQ9NsuZPB?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

* ***Condition***: It includes ***None, Show slide show when, Show slide when, Hidden slide show when, Hidden slide when***
* ***Field***: It contains ***Business Object attributes***
* ***Index***: The number of the row in the ***Business Objects Data table***
* ***Operator***: It includes ***contains, does not contain, starts with, doesn't start with, ends with, doesn't end with***, etc.
* ***Value***: you can input the value or select an ***attribute from Business Object or Event***

{% hint style="info" %}

* The Business Object attributes in Field are selected Business Object in Template Setting

  ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXcjZ2Ys57PoyRV1YkU4JnaYGu_LhNjotSDLXLbxThLEe2H3IhS_83tp5Ngkwb4ZxdWIMbpVbo_tSeCKL0Z3_RYTNfeyV4tZaDOhzet80j6f0Q0tib2sPUDdWphWsYeBISEuNor3HwaKt1a9X-c0cvuCTu4R?key=McWN_Lv9ZK-QuQzVrY3nVw)
* If Business Object in Template Setting does not be selected, a popup of ***Select Source*** will appear

![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXeBX6LExLm9I_5kq-FNPjAJeCwH0CCAvoBlax8U3y0VFIospP2TUS3b34_8VNY6GC5ZkPYSWslaJhkVYtoTogVL7-T6MW-zdMhVCMTZmVYGktZTs958KeF--VHegoYZ2m3cAcGNXxiBx5Kz9WAQWznrH8Wu?key=McWN_Lv9ZK-QuQzVrY3nVw)
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.antsomi.com/cdp-365-user-guide-en/marketing-hub/media-template/settings/blocks-and-settings/slide-show.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.