19 – Carousel
    • 1 Minute to read
    • Dark
      Light

    19 – Carousel

    • Dark
      Light

    Article summary

    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

    Mobile

    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

    Number of images

    Select up to four carousel image placements.

    Option

    Details

    Default

    Number Of Images

    • 2

    • 3

    • 4

    4

    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

    Hide/Show

    Used to select to hide or show the scroll arrows.

    Option

    Details

    Default

    Hide/Show

    Scroll Arrows

    Show

    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

    Scroll Arrows Color

    Apply a color to the scroll arrows

    Option

    Details

    Default

    Scroll Arrow Color

    Scroll Arrows Color

    #ffffff

    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

    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

    Links

    It allows you to add the link to the images.

    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

    Fallback view

    Desktop

    Mobile


    Was this article helpful?