Skip to main content

Overlay Slider

The Overlay Slider element displays multiple Overlay elements in an image
slider. It has Image, Video, Title, Meta, Content, Link and Hover Image fields.

Height and Item Width

The Ovelay Slider element has options to set the item width for each breakpoint in percentage. Alternatively, expand all items to the width of their content. Choose whether the slider height adapts to its content or the viewport height.

Column Gap

Set the size of the column gap between slider items. Optionally, show a divider between them.

Slide All Items

Group slider items into sets and slide all visible items at once. The number of items within a set depends on the defined item width, e.g. 33% means that each set contains 3 items.

Animation

Additionally, center the active slide, disable infinite scrolling or enable autoplay.
  • New Arrivals

    Apple
    MacBook Pro

    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Cum natoque et magnis dis parturient.
    Discover Now
  • New Arrivals

    Acer Chromebook

    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Cum natoque et magnis dis parturient.
    Buy Now
  • New Arrivals

    Apple iPhone Pro

    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Cum natoque et magnis dis parturient.
    Discover Now
  • New Arrivals

    Bose Headphones

    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Cum natoque et magnis dis parturient.
    Discover Now

Navigation

Add a dotnav navigation and an additional slidenav to navigate to the previous and next slides. Define the position and margin for each navigation.

    More Settings

    Since the Overlay Slider element displays multiple overlays, their settings are explained in the Overlay element documentation. Options for the different content fields are very similar across all elements. They are described in the corresponding Image, Headline, Text and Button elements.