Skip to main content

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.

    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.

    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.
        • Founder & CEO

          Gianni Clifford

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

          Robert Lewis

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

          Jen Humphrey

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

          Pedro Castillo

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

          Jane Watson

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

          Mia Anderson

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

          Sarah Brown

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

          Tom Buckley

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