True Crossfade

[JohannesMP]

Currently when the Slider fades between two items, it will fade both of them simultaneously, which means that halfway through the fade, the background will be 25% visible (50% of 50%) behind the two slides.

It would be nice to have the option of having a true crossfade, where the back slide remained at 100% opacity, preventing the background from being visible.

Here's an illustration of how fading currently works, and what I am suggesting:

Proper crossfading would be possible with the use of z-indexing to ensure that a lower image can fade over a higher one.

Not a high priority issue, but would be nice to have.

[ws101]

I second this. Seeing 25% of the background can be really distracting in some scenarios.

[dainiusbukauskas]

I figured it out! Use a custom easing function so that they overlap enough to cover the background!

Use this: visible = {"float": "left", "position": "relative", "opacity": 1, "zIndex": 2, "-webkit-transition": "opacity " + fadeTime + "ms cubic-bezier(0.175, 0.885, 0.32, 1.275)", "transition": "opacity " + fadeTime + "ms cubic-bezier(0.175, 0.885, 0.32, 1.275)"}, hidden = {"float": "none", "position": "absolute", "opacity": 0, "zIndex": 1, "-webkit-transition": "opacity " + fadeTime + "ms cubic-bezier(0.6, -0.28, 0.735, 0.045)", "transition": "opacity " + fadeTime + "ms cubic-bezier(0.6, -0.28, 0.735, 0.045)"} ,

to replace this: visible = {"float": "left", "position": "relative", "opacity": 1, "zIndex": 2}, hidden = {"float": "none", "position": "absolute", "opacity": 0, "zIndex": 1},