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.
  • 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.
  • 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

Get Hundreds of YOOtheme Pro
Features All in One Package.