Change the Divi slider module 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, with the slide image fading/sliding from the left

By adding the following code into your slider modules custom CSS boxes 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.

There are quite a few options for transitions in Divi but from what i can see, the transitions below can be used for the slider module. Just copy and paste any of the following code into the SLIDE DESCRIPTION and/or SLIDE IMAGE custom CSS sections.

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;

1. Default Divi Slider

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 THEME EXAMPLES

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 THEME EXAMPLES

2. Fade In Left

SLIDE DESCRIPTION – animation-name:fadeInLeft;
SLIDE IMAGE – 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 THEME EXAMPLES

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 THEME EXAMPLES

3. Flip In X

SLIDE DESCRIPTION – animation-name:flipInX;
SLIDE IMAGE – 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 THEME EXAMPLES

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 THEME EXAMPLES

4. Fade In Left + Fade In Right

SLIDE DESCRIPTION – animation-name:fadeInLeft;
SLIDE IMAGE – 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 THEME EXAMPLES

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 THEME EXAMPLES

4. Fade In Left + Fade In Right

SLIDE DESCRIPTION – animation-name:fadeInLeft;
SLIDE IMAGE – 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 THEME EXAMPLES

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 THEME EXAMPLES

Comments

comments

Pin It on Pinterest

Divi Freebies

Do you want some Divi FREEBIES?

Join our mailing list to receive the latest news, reviews, examples and Divi Theme FREEBIES.

You have Successfully Subscribed!