Fade transition on transparent background

RoyalSlider has a fade transition that animates opacity of one image at once, second image is simply removed when transition is complete. This is done to optimize performance and animation looks much smoother this way. If you removed the background from slider, you might see portion of next slide durting the transition.

What to do?

Option 1: Simply add background to slides that matches real background:

.rsSlide {
    background: #C00; /* color or image pattern, or anything else that is not transparent */ 
}

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.


Found a mistake in article? Know how to improve it? Please open support ticket.