Carousel
shortcode

Present different content in a nice looking carousel. Let your users slide to see more.
Read documentation
Usage frequency
69%
Preset amount
77%
Customizability
93%

Available options

Default code: [dfd_carousel screen_normal_resolution="1024" slider_type="horizontal"]

Style – Choose horizontal or vertical carousel style;

Center mode – Allows you to set the active element in the center;

Adaptive height – This option will adapt the carousel according to the content size. Option is available when you set one slide to show;

Draggable effect – Allows you to enable or disable the dragging of the carousel’s slides;

Touch move – Enable or disable the carousel sliding by swiping on touch devices;

Custom CSS class – Type your own unique class name for the item – this is a useful option for those who want to create a specific style.
For example, you can type custom-style class and then go to Theme options -> General Options -> Custom CSS / JS -> Custom CSS and write your own CSS code with this class to get your own style;

Animation – Choose between 14 preset animation effects;

Slideshow settings – Allows you to select the number of slides to show, set the speed for the slideshow and add the offset for the carousel’s items;

Auto slideshow settings – Enable or disable the autoplay, set the speed for the autoplay;

Responsive – Allows you to set the number of slides to show for the medium desktop, tabs and mobiles;

Navigation – Enable or disable the carousel navigation. Choose the arrows position and style;

Arrow icon style – Define the styles for carousel arrows;

Dots pagination – Allows you to add the dots navigation and choose one of ten preset dots styles;

Shadow on hover – Allows you to show the shadow for the arrow;

Numbers color – Choose the color for the slides counter.

Default styles

Samples of preset styles without custom changes
horizontal style
Vertical style