Disable Divi Slider Image "Slide In" Effect

Written by Dan Mossop

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:

Check out Divi Booster

With Divi Booster, you can easily customize and enhance your Divi sites with hundreds of new features, like disabling the slider "slide in" effect with just a click. Build better websites without the hassle.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

16 Comments

  1. the following code works on all other slides except the first, why is this?

    animation-name:fadeIn;
    -moz-animation-duration: 0.1s;
    -ms-animation-duration: 0.1s;
    -o-animation-duration: 0.1s;
    animation-duration: 0.1s;

    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -ms-animation-delay: 0s;
    -o-animation-delay: 0s;
    animation-delay: 0s;

    The first slide always defaults to the shitey slide in… your disable slide just causes it to pop-in which is also not a good fix

    Reply
    • Hey Burrito,

      it looks like you're applying animation-name, etc, to the div wrapping the slide img tag, but it's being overridden on the first slide by the "fadeLeft" animation-name set on the img tag directly (by Divi, I think, using the selector ".et_pb_slide:first-child .et_pb_slide_image img.active"). You should be able to fix it by adding this:

      .et_pb_slide:first-child .et_pb_slide_image img.active {
        animation-name: none !important;
      }
      

      Hope that helps!

      Reply
  2. 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
      • Thanks! This is the solution I was looking for….

        I apply only for the description class and works very well.

        Reply
  3. 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
  4. Eu te amooooo kkk
    Você não imagina o "quanto" eu procurei por isso… não estava conseguindo sozinha.
    Muito, muito, muito obrigada! :)

    Reply
  5. 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
  6. 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

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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

We may earn a commission when you visit links on our website.