The Divi slider module allows you to add content sliders to your Divi website. The module allows you to add text, images, and videos to your slides that can be controlled via left & right navigation arrows or dot navigation. As with all Divi modules, there are settings to cover all elements of the slider.

Change your Divi slider module slide transitions

The default Divi slider transitions (as seen in example 1 below) is for the text content and button to fade/slide up from the bottom and the slider image fading/sliding from the left.

By adding any of the following CSS code into your Slider modules Custom CSS boxes in the Advanced tab for SLIDE DESCRIPTION (.et_pb_slider .et_pb_slider .et_pb_slide_description) and SLIDE IMAGE (.et_pb_slider.et_pb_slider .et_pb_slide_image), you can change the slider content transitions. You can add a single transition type to 1 or both of the image and description boxes and they can be the same or different. 

 change Divi slider transitions

animation-name:fadeIn;
 animation-name:fadeTop;
 animation-name:fadeLeft;
 animation-name:fadeRight;
 animation-name:fadeBottom;
 animation-name:fadeInTop;
 animation-name:fadeInLeft;
 animation-name:fadeInRight;
 animation-name:fadeInBottom;
 animation-name:flipInX;
 animation-name:flipInY;

If you are using the slider module you may also be interested to learn how to change the Divi slider height using the inbuilt module settings.

1. Default Divi Slider animations

DIVI SLIDER HEADING

This is the Divi slider module and we are customizing the slider transitions using CSS in the modules custom CSS tab.

DIVI SLIDER HEADING

This is the Divi slider module and we are customizing the slider transitions using CSS in the modules custom CSS tab.

2. Custom animation to Fade In Left

CSS code added to the Module settings;
SLIDE DESCRIPTION CSS Box – animation-name:fadeInLeft;
SLIDE IMAGE CSS box- animation-name:fadeInLeft;

DIVI SLIDER HEADING

This is the Divi slider module and we are customizing the slider transitions using CSS in the modules custom CSS tab.

DIVI SLIDER HEADING

This is the Divi slider module and we are customizing the slider transitions using CSS in the modules custom CSS tab.

3. Custom animation to Flip In X

CSS code added to the Module settings;
SLIDE DESCRIPTION CSS box – animation-name:flipInX;
SLIDE IMAGE CSS box – animation-name:flipInX;

DIVI SLIDER HEADING

This is the Divi slider module and we are customizing the slider transitions using CSS in the modules custom CSS tab.

DIVI SLIDER HEADING

This is the Divi slider module and we are customizing the slider transitions using CSS in the modules custom CSS tab.

4. Custom animation to Fade In Left + Fade In Right

CSS code added to the Module settings;
SLIDE DESCRIPTION CSS box – animation-name:fadeInLeft;
SLIDE IMAGE CSS box – animation-name:fadeInRight;

DIVI SLIDER HEADING

This is the Divi slider module and we are customizing the slider transitions using CSS in the modules custom CSS tab.

DIVI SLIDER HEADING

This is the Divi slider module and we are customizing the slider transitions using CSS in the modules custom CSS tab.

Pin It on Pinterest

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close