Create Fade In/Out In Place Effect for Modern Sliders

[detailsguy]

Hi there,

Trying to create a fade in-place transition for a slider using the fullscreen slider template in Modern Slider.

I’m looking for a fade transition where one images appears after another without sliding in/out of frame in any way. I’ve set the fade-in and fade-out effects for all of the slides as follows but they are still sliding in from the right instead of just fading out/in in place.

Any suggestions?

[ruenel]

Hello @detailsguy,

Thanks for writing in! In your Slider Container element, enable the “Fade” for the Entrance and Exit in the Options.

Hope this helps.

[detailsguy]

Hrm not seeing that option, these are the options I’m seeing:

[ruenel]

Hello @detailsguy,

Your layout should be “Stacked”.

Hope this helps.

[detailsguy]

Perfect, thank you Rue! That worked great.

One other quick question, is there somewhere within the Pro framework that I can control the transition duration between slides on this slider?

I couldn’t find it within the settings as each slide element has it’s own transition option, as well as the full screen slider, and slider container elements but it doesn’t seem like any are specifically controlling the transition duration.

I just went ahead and added the following css to fix it so not a big deal either way, just curious.

.x-slide-container-content {
–x-slide-container-transition-duration: 1250ms;
}

[ruenel]

Hello @detailsguy,

We do not have a setting to change the duration of the transition. You may need to go to the Effects of the Slider Container and each Slides element and set the Transition Duration to 0.

Best Regards.

[detailsguy]

Roger that, thanks Rue!

[ruenel]

You’re welcome, @detailsguy.