DFD Carousel

Create various carousels and sliders with this module

Add various carousels and sliders with this module.

More examples of the carousel can be found here.

This is a nested shortcode – module that includes other modules. You may style the container and then fill it in with elements.

Add various elements int a carousel and style their sliding effects.

General settings

  • Style – select the style of the carousel module for your site.
    • Horizontal – select this style to create the carousel with the horizontal slide.
    • Vertical – select this style to create the carousel with the vertical slide.
  • Loop – set it to Enable to make the carousel always slide.
  • Center mode – set it to Enable to set the active element in the center.
  • Draggable effect – set it to Enable to allow drag the carousel with the mouse.
  • Touch move – switch it to Enable to allow scroll the carousel with touch actions. For Horizontal style only.
  • Adaptive height – switch it to Enable to adapt the carousel according to the content size. The option is available when you set one slide to show.
Extra features
  • Animation – choose between 14 preset animation effects.
  • Custom CSS class – enter our own unique class name for the item – this is a useful option for those who want to create a specific style. E.g.: you can type custom-style class and then go to Theme options General options Custom CSS/JS Custom CSS field and write your own CSS code with this class to get your own style.

Slideshow settings

  • Slides to show – specify the number of slides to show at a time.
  • Slideshow speed – set the speed of the slideshow.
  • Items offset – set the spacing between carousel elements.
Auto slideshow settings
  • Autoplay – switch it to Enable to activate the autoplay for the carousel.
  • Autoplay speed – specify the speed automatically sliding carousel.

Responsive settings

Medium desktop
  • Screen resolution – set the screen resolution for the medium desktops.
  • Number of slides – set the number of slides to show for the medium desktops.
Tablets
  • Screen resolution – set the screen resolution for the tablets.
  • Number of slides – set the number of slides to show for the tablets.
Mobile phones
  • Screen resolution – set the screen resolution for the mobile devices.
  • Number of slides – set the number of slides to show for the mobiles.

Navigation style

  • Navigation – set it to Enable to activate the navigation between the previous and next slides inside the carousel.
  • Arrows position – select the best suitable position of the navigation arrows.

  • Navigation vertical offset –  add the offset for the navigation arrows to adjust their position.
  • Arrow style – specify the style of the arrows – you may select pre-built arrows or upload custom ones.
  • Slides counter – set it to Enable to display the number of slides and the current slide.
  • Always show arrows – set it to Enable in case you want the arrows to be displayed permanently.
  • Active dot color – choose the color for the active dot. The default color is inherited from Theme OptionsStyling OptionsMain site color.
  • Arrows hover color – select the  icon hover color.
Navigation dots

  • Dots pagination – switch it to Enable to display the the bullets in carousel.
  • Pagination style – select the pagination dots style from the list of available ones.
  • Active dot color  – specify the color of the current dot. The default color is inherited from Theme OptionsStyling OptionsThird site color.
div#stuning-header .dfd-stuning-header-bg-container {background-image: url(http://rnbtheme.com/documentation/wp-content/uploads/2017/01/hands1.jpg);background-size: cover;background-position: center center;background-attachment: scroll;background-repeat: no-repeat;}#stuning-header div.page-title-inner {min-height: 550px;}