Slideshow
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.
American Black Bear
The Secret Life
of Bears
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient.
Japanese Macaque
Japan’s Popular Bathing Snow Monkeys
Adipiscing elit duis commodo ligula eget dolor Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
Indonisia's Islands
The End of Tigers in Bali and Java
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
Animation
Choose one of the different slideshow transitions and add an additional Ken Burns animation for the image.
Navigation
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.
Thumbnav
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.
Overlay
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.
Stunning Concrete Modern Apartments
Majestic Facade in the City Center
Chelsea Group Tower
Interior Concept for the Elephant Office
New Office for Wessex
New Workspace in Edinburgh
Sustainability
Energy-Saving Homes
Education
Future Campus in Helsinki
Parallax Animation
Instead of an overlay transition, create a parallax effect by moving the overlay, title, meta, content and link at different speeds while sliding between the slideshow items.