Create responsive image Slideshows with fancy transition effects and display content in an overlay.

  • Image Alt

    Item title

    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 ex ea commodo consequat.
  • Image Alt

    Item title

    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 ex ea commodo consequat.
  • Image Alt

    Item title

    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 ex ea commodo consequat.

    Support multiple navigation and dotnav position

    • Image Alt

      Item title

      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 ex ea commodo consequat.
    • Image Alt

      Item title

      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 ex ea commodo consequat.
    • Image Alt

      Item title

      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 ex ea commodo consequat.

      Thumbnav and Parallax Effect

      • Image Alt

        Freedom to create awesome websites

        This is meta
        Lorem Ipsum is simply text the printing and typesetting standard industry. So you like a demo website and you want to add.

        Read more

      • Image Alt

        Freedom to create awesome websites

        This is meta
        Lorem Ipsum is simply text the printing and typesetting standard industry. So you like a demo website and you want to add.

        Read more

      • Image Alt

        Freedom to create awesome websites

        This is meta
        Lorem Ipsum is simply text the printing and typesetting standard industry. So you like a demo website and you want to add.

        Read more

      • ALTT
      • ALTT
      • ALTT

      Ken Burns Effect and Vertical Navigation

      • Image Alt

        Freedom to create awesome websites

        Cras mattis iudicium purus sit amet fermentum at nos hinc posthac, sitientis piros afros.

        Read more

      • Image Alt

        Freedom to create awesome websites

        Cras mattis iudicium purus sit amet fermentum at nos hinc posthac, sitientis piros afros.

        Read more

      • Image Alt

        Freedom to create awesome websites

        Cras mattis iudicium purus sit amet fermentum at nos hinc posthac, sitientis piros afros.

        Read more

      • ALTT
      • ALTT
      • ALTT

      Content Fields

      Here is a list of common content fields for Slideshow add-on.

      Setting Description
      Image An image field with an image picker.
      Image ALT Insert Alt text, which is an important for SEO purposes and part of making a site accessible.
      Title A text field used for Title of the slideshow item
      HTML Element Choose on of the elements to fit your semantic structure.
      Style Heading styles differ in font-size but may also come with a predefined color, size and font
      Meta A text field used for meta text like the author or publication date.
      Content A text field for the main text blocks.
      Use Custom Link A checkbox field used for adding Button of the slideshow item
      Text Color Set light or dark color mode for text, butons and controls
      Navigation Thumbnail An image field with an image picker. This image is only used if the Thumbnav navigation style is set.
      Alt Thumbnail Insert Alt text, which is an important for SEO purposes and part of making a site accessible.

      Slideshow Settings

      Learn more about animation settings and how to use the settings.

      Setting Description
      Height The slideshow always takes up fullwidth, and the height will adapt automatically based on the defined ratio. Alternatively, the height can adapt to the height of the viewport. Note: Make sure, no height is set in the section settings when using one of the viewport options.
      Ratio Set a ratio. It's recommended to use the same ratio of the background image. Just use its width and height, like 16:9
      Min Height Set the minimum height. This is useful if the content is too large on small devices
      Max Height Set the maximum height
      Box Shadow Select the slideshow's box shadow size.
      Add extra bottom shadow Add Add extra bottom shadow below slideshow

      Animation Settings

      Learn more about animation settings and how to use the settings.

      Setting Description
      Transition Select the transition between two slides (Support 05 style animation: Slide, Pull, Push, Fade, Scale)
      Autoplay To activate Slideslide autoplays to the attribute.
      Ken Burns Effect Select the transformation origin for the Ken Burns animation

      Learn more about navigation settings and how to use the settings.

      Setting Description
      Navigation Display Select the navigation type, show or hide navigation control.
      Show navigation below slideshow Use this option to show the navigation below the slideshow images, you can choose the position/margin or color mode of the navigation too.
      Vertical navigation Set Vertical navigation style mode.
      Position Select the position of the navigation.
      Margin Set the vertical margin.
      Breakpoint Display the navigation only on this device width and larger.

      Slidenav Settings

      Learn more about slidenav settings and how to use the settings.

      Setting Description
      Position Select the position of the slidenav.
      Show on hover only Display Slidenav on hover only
      Margin Apply a margin between the slidnav and the slideshow container.
      Breakpoint Display the slidenav on this device width and larger.

      Overlay Settings

      Create an image overlay, which comes in different styles.

      Setting Description
      Margin Apply a margin between the overlay and the image container.
      Overlay Positions A collection of utility classes to position content (support 13 positions)
      Overlay Style Select a style for the overlay (06 styles support).
      Width Set a fixed width for overlay content.
      Overlay Parallax Animation Choose between a parallax depending on the scroll position, which is applied once the slide is active.
      Overlay Transition Animation Choose between an animation depending on the scroll position, which is applied once the slide is active (15 styles support)
      Title Transition Animation Select a transition effect for the Title.
      Meta Transition Animation Select a transition effect for the meta text.
      Content Transition Animation Select a transition effect for the content.
      Button Transition Animation Select a transition effect for the button.

      General Settings

      General settings, which are the same across all add-ons, are grouped in a General section at the bottom. Here is a short overview.

      Setting Description
      Margin Keep the existing vertical margin (e.g. from headings), force specific margin or remove all margin. Margins of an element can be removed from the top and bottom.
      Remove top margin. Use this option to remove the add-on's top margin
      Remove bottom margin. Use this option to remove the add-on's bottom margin
      Animation Overwrite the animation settings from the section. This won't have any effect unless animations are enabled for the add-on.
      Alignment This option specifies the alignment of an add-on according to the surrounding element
      Text Breakpoint Define the device width from which the alignment will apply.
      Visibility Define when the add-on should be hidden.
      CSS Class If you wish to style a particular content element differently, then use this field to add a class name and also refer to it in your css file.