Slideshow add-on

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

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.
  • Image Alt
  • Chocolate love
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.
  • Image Alt
  • Image Alt

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.

Information

2453 Koontz Lane, North Hollywood, CA, United States

Address