Skip to main content

Fade transition on transparent background

RoyalSlider has a fade transition that animates opacity of one image at once, the second image is simply removed when the transition is finished. This is done to optimize performance and make the animation look more smooth. If you removed the background from the slider, you might see a portion of next slide during the transition.

What to do?

Option 1: Add background to slides that matches the real background:

.rsSlide {
background: #C00; /* non-transparent color or image (pattern) */
}

Option 2: Use "move" transition type.

Option 3: Enable addActiveClass option (in WP version it's in Misc section). Now active slide will have class rsActiveSlide, so you may use CSS transitions and animate opacity of the current slide content. Here is an example.