Skip to main content

Slideshow

The Slideshow element displays an image slideshow with text overlays. It has Image, Video, Title, Meta, Content, Link and Navigation Thumbnail fields.
Lake Como, Italy

A Unique Underwater Experience

Pula, Croatia

Private Beach With Cave Kayaking

Sahara Desert

Sunset Camel Ride With Overnight Stay


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.

Pull

Animation Pull

Meta Text

Above the Sky

Photography

Push

Animation Push

Meta Text

Desert Island

Photography

Slide

Animation Slide

Meta Text

A Light in the Distance

Photography

Scale

Animation Scale

Meta Text

Sand Beaches

Photography

Ken Burns

Meta Text

Animation Ken Burns

Photography

In the Jungle


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.
BMW Series 4

Find Your Brand New Way to Drive

Mercedes A Class

Configure Your Dream Car


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

Latest Projects

The Arc, London

Latest Projects

Residential Project

Latest Projects

The Twenty2, London


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.
Professional styling since 1998

Modern Hair Cuts and
Stylings

For the Gentlemen

Beard Care & Precise Shaving

Wellness and beauty

Nail Care & Hair Removal


More Settings

Options for the different content fields are very similar across all elements. They are described in the corresponding Image, Headline, Text and Button elements.
Express Your Extraordinary

Living Room Ideas

Summer Trend Color Beige

Back to
Basics

Autumn Interior Trends

Your Perfect Match