When creating an image slider, using a cross fade is one of more popular effects. Various sliders use differing techniques to create such an effect. Major techniques I’ve found so far are:

• Method 1: Use an overlay and underlay <div> and fade in and out each other’s visibility.
• Method 2: Create a <div> matching the exact size of the slider during initialization, play with its z-index property, and then fade each other.

Using method-1, it needs creating two unneeded and over exploited block elements most commonly a div. First the background property is applied to the underlayed-div then the overlayed-div is faded out and subsequently changed in z-index property to be positioned lower that other one.

Using method-2, it creates only one extra div and now container’s background is changed and the overlay div is faded out. Implementing this effect now limits the transition effect that can be build (but this is not the question in hand).

The reason why I believe this could be better is because extra elements will always have to be added to give the effect. Due to this reason, creating effects like that of nivo-slider requires creating 12 to 15+ divs to give the effect.

Adding up to number of elements to create the element does not seem to be the right way.

Are the methods I mentioned above used so much, because there aren’t any other ways? There has to be better ways that to create the cross-fade effect.

So my question is simple,
Is there a better way to create this effect? If yes, What are they?