Disable Divi Slider Image "Slide In" Effect

This post may contain referral links which may earn a commission for this site

When you first view a Divi Theme slider, the slider image will "slide in" from the left. If you don't want this slide in effect on your slider images, you can disable it with the following CSS:

.et_pb_slide_image, .et_pb_slide:first-child .et_pb_slide_image img.active {
    -webkit-animation-duration: 0s !important;
    animation-duration: 0s !important;
}

I've added an option into my Divi Booster plugin to disable the slider "slide in" effect:

Hundreds of new features for Divi
in one easy-to-use plugin

13 Comments

  1. Hey Dan
    Do you just add your CSS to the slider module settings under 'Main element'?
    Have done this but it's not working. My fault I'm sure.
    Mick

    Reply
    • Placed your code under 'slide image' but still not working

      Reply
      • Hi Michael, the code won't work in the Divi Module Custom CSS tabs as those boxes only take CSS properties, not full CSS code (as given in this post). You should add it via either the Custom CSS box in the theme options, the Custom CSS box for the page you're working on, or in the style.css of your child theme (if you're using one). This post explains in a bit more detail:

        https://divibooster.com/adding-css-to-the-divi-theme/

        Reply
    • try this it worked for me.
      .et_pb_section, .et_pb_section *{
      animation:none !important;
      opacity: 1 !important;
      }

      Reply
      • Thanks for sharing, sam! It's worth noting for anyone trying this that it will disable all animations within all sections on the pages it is applied. Similarly, it will override the opacity of all elements within these sections. That may not be an issue in many cases, but worth being aware of. Thanks again!

        Reply
  2. I love your plugin! Thank you! Strange that this isn't already a toggle. I'm interested in eliminating the slide in effect in an image gallery. It seems like that if they were to pick a default effect it would be something more sublet like a fade in.

    Reply
    • Hey David. Yeah, I'm surprised there isn't an option to disable this within Divi itself. Anyway, I've just updated Divi Booster to add an option for it (under "Modules > Gallery"). Hope that helps!

      Oh, and here's a link to the post with the CSS for the fix, if you need it:

      https://divibooster.com/disable-divi-gallery-image-slide-in-effect/

      Reply
    • Hi John, the code won't work in the Divi Module Custom CSS tabs as those boxes only take CSS properties, not full CSS code (as given in this post). You should add it via either the Custom CSS box in the theme options, the Custom CSS box for the page you're working on, or in the style.css of your child theme (if you're using one). This post explains in a bit more detail:

      https://divibooster.com/adding-css-to-the-divi-theme/

      Reply
  3. Eu te amooooo kkk
    Você não imagina o "quanto" eu procurei por isso… não estava conseguindo sozinha.
    Muito, muito, muito obrigada! 🙂

    Reply
  4. OOps, I thought I was talking to Nick!

    I just bought your booster because I could NOT reduce the padding around a section — Even though I tried to use negative numbers! Your advantage!

    Reply
  5. WHY is this a CSS fix? Everything else like this is toggle. PLEASE change this in the next update. It makes NO sense to keep this change as a coding decision. No sense.

    Reply
    • Hey Randy, I'm with you on this – having this as a toggle is something that I'd like to see as part of the Divi Theme core – hopefully Elegant Themes have it in the pipeline…

      My Divi Booster plugin has an option to disable the slide in on a site-wide basis, but it would be good to be able to set this on a slider by slider basis without the need for code.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *