Panel Slider

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

Item Width

The Panel Slider element has options to set the item width for each breakpoint in percentage. Alternatively, expand all items to the width of their content.

Column Gap

Set the size of the column gap between slider items.

Divider

Optionally, show a divider between slider items.

Indie-Pop Artist

Grizzly is rising to become an iconic figure

Fashion Event

London fashion week: Who’s hot, who’s not

Writer & Director

Podcast: Elle Sia wants to believe in the good

Aging Ungracefully

CG stole the glamour of great movies

Balanchine

Jewels reinvented: Raw diamonds don't glitter

Gap-Free Slider

To align the images without any gaps when using a blank panel, use a panel padding instead of the slider column gap.

Style

Colored Accessories to Match Your Outfit

Lorem ipsum dolor sit amet consetetur sadipscing elitr, sed diam nonumy eirmod tempor. invidunt ut labore et dolore.

Design

The Versatile Use of Checked Pattern

Lorem ipsum dolor sit amet consetetur sadipscing elitr, sed diam nonumy eirmod tempor. invidunt ut labore et dolore.

Fashion

Fresh Inspiration for Springtime 2021

Lorem ipsum dolor sit amet consetetur sadipscing elitr, sed diam nonumy eirmod tempor. invidunt ut labore et dolore.

Streetwear

Bring More Neon-colored Prints Into Your Life

Lorem ipsum dolor sit amet consetetur sadipscing elitr, sed diam nonumy eirmod tempor. invidunt ut labore et dolore.

Fashion

Highlights From Stockholm Fashion Week 2019

Lorem ipsum dolor sit amet consetetur sadipscing elitr, sed diam nonumy eirmod tempor. invidunt ut labore et dolore.

Food

Our Favorite Food Markets in Europe

Lorem ipsum dolor sit amet consetetur sadipscing elitr, sed diam nonumy eirmod tempor. invidunt ut labore et dolore.

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.

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."

George, Phoenix, AZ

"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Sed consequat, leo egetaugue velit cursus nunc."

Daniel, Brooklyn, NY

"Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam."

Anna, Salt Lake City, UT

"Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dutiam rhoncus. Maecenas tempus, tellus eget condimentum."

Steve, Columbia, MO

"Etiam sit amet orci eget eros faucibus fringilla mauris sit amet donec sodales sagittis magna. Sed consequat, leo egetaugue velit cursus nunc."

John, Jackson, MI

"Etiam sit amet orci eget eros faucibus fringilla mauris sit amet donec sodales sagittis magna. Sed consequat, leo egetaugue velit cursus nunc."

Sara, San Diego, CA

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.

Hanna Scott

PR Manager, Mindclub

“Lorem ipsum dolor sit amet, consectetuer adipisci enean commodo ligula eget dolor. Nullam dictum felis eu pede mollis pretium.”

Steve Gordon

Developer, Node

“Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dutiam rhoncus. Maecenas tempus, tellus eget condimentum.”

Julie Duncan

Freelance Designer

“Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur."

Etienne Bernard Curates "Rubber Renaissance" for EOS

Wendy Katchadourian at Highline Stages

More Settings

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