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

  • Drawstring Sweater

    Drawstring Sweater

    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

    Drawstring Sweater

    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

    Drawstring Sweater

    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 positions

    • Image Alt

      Medical Services That You Can.

      Curabitur pulvinar metus vulputate, dignissim augue quis, aliquam sapien. Donec finibus nisi a viverra.
    • Image Alt

      Start Up Your Health Care

      Curabitur pulvinar metus vulputate, dignissim augue quis, aliquam sapien. Donec finibus nisi a viverra.
    • Image Alt

      Medical Laboratory Technicians

      Curabitur pulvinar metus vulputate, dignissim augue quis, aliquam sapien. Donec finibus nisi a viverra.

      Support multiple navigation and dotnav position

      • Image Alt

        Medical Services That You Can.

        Curabitur pulvinar metus vulputate, dignissim augue quis, aliquam sapien. Donec finibus nisi a viverra.
      • Image Alt

        Start Up Your Health Care

        Curabitur pulvinar metus vulputate, dignissim augue quis, aliquam sapien. Donec finibus nisi a viverra.
      • Image Alt

        Medical Laboratory Technicians

        Curabitur pulvinar metus vulputate, dignissim augue quis, aliquam sapien. Donec finibus nisi a viverra.

        Thumbnav and Parallax Effect

        • Image Alt

          Sweet bites for you

          Tasteful
          It’s always good time for sweets! Made with care and prepared with love, our sweets are all you might need to make every day special. Find your favorite now.
        • Image Alt

          All for a special day

          Delight
          It’s always good time for sweets! Made with care and prepared with love, our sweets are all you might need to make every day special. Find your favorite now.
        • Chocolate love

          Chocolate love

          Lovely
          It’s always good time for sweets! Made with care and prepared with love, our sweets are all you might need to make every day special. Find your favorite now.
        The Slideshow component is fully responsive and supports touch and swipe navigation as well as mouse drag for desktops. When swiping between slides, the animation literally sticks at your fingertips or mouse cursor. It even accelerates to keep up with your pace when you click through previous and next navigation. All animations are hardware accelerated for a smoother performance.

        Ken Burns Effect and Vertical Navigation

        • Image Alt

          Sweet bites for you

          It’s always good time for sweets! Made with care and prepared with love, our sweets are all you might need to make every day special. Find your favorite now.
        • Image Alt

          All for a special day

          It’s always good time for sweets! Made with care and prepared with love, our sweets are all you might need to make every day special. Find your favorite now.
        • Image Alt

          Chocolate love

          It’s always good time for sweets! Made with care and prepared with love, our sweets are all you might need to make every day special. Find your favorite now.

        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.