The Slideshow element displays an image slideshow with text overlays. It has Image, Video, Title, Meta, Content, Link and Navigation Thumbnail fields.
Width and Height
The slideshow always takes up the full width, and the height will adapt automatically based on the defined ratio. Optionally, limit it by a min or max height. The height can also adapt to the height of the viewport. Additionally, set the text color of the content and navigation to either light or dark.
Choose one of the different slideshow transitions and add an additional Ken Burns animation for the image.
Add a dotnav or a thumbnav navigation and an additional slidenav to navigate to the previous and next slides. Define the position, margin and color for each navigation.
If the thumbnav is selected, set the width and the height for the thumbnail image and define whether thumbnails wrap into multiple lines if the container is too small. SVG images can be injected into the page markup and further styled with CSS. Optionally, select a different image for the thumbnail.
The slideshow images can have a text overlay. Define its position, style and width. If no width is set in the section or row, and the slideshow takes the full width, its overlay text can be aligned in the same way as a section container. Select a transition for the overlay when sliding between items.