Slider stacked - transition time

[iTurtle]

hi there,
in the manual under " Options Controls (Stacked)" the options include a “transition” time (but no duration time which i have in my options of the slider container - but no transition time). latest version of pro.
i need both for the slider element.
where to find them???
thanks a lot - kai

[ruenel]

Hello Kai,

Thanks for writing in!

The Duration is in the Slide Container element. Interval Autoplay must be enabled first:

Best Regards.

[iTurtle]

hi @ruenel,

also here a misunderstanding.

i was referring to the transition time and not to the duration.

best wishes, kai

[tristup]

Hi Kai,

The Transition option is only available for Inline Slider, not for the Stacked which you are using here.

Thanks

[iTurtle]

hi @tristup,
by tria and error i found this setting in the inline slider, too.
but i thought this must be a mistake…
what is the reason for that? i cannot control the timing of the blend-effect in a simple (stacked) gallery???
if this is really so - then what can i do, to get a simple stacked gallery with a slow blend mode? just a few images blending slowly into each other.
i hope i won’t have to resort to a third-party solution for that.
best wishes, kai

[Regnalf]

Got the same question right now. It seems there have be no effect if you change the transition time in either elements (container or slide).

[tristup]

Hi Kai,

For the Stacked slider, there is no transition implemented until now. I will surely check with our development team on this and if possible will add this as a feature request, so they will consider it in the future.

Thanks

[iTurtle]

hi @tristup,

that is so strange…! thanks for checking with the dev team!

would you have a suggestion for me for an alternative? native from theme.co or third party?

thanks again - kai

[Regnalf]

Even if it is not in the options, you still can altered it with this css:

$el .x-slide:where(.x-effect-enter, .x-effect-exit, .x-effect-entering, .x-effect-exiting)
{
  animation-duration: 3s !important;
  transition-duration: 3s !important;
}

place it in the slider container custom css section. !important is needed to override the duration!

[tristup]

Hi Kai,

You can use the custom CSS code suggested by @Regnalf. But please remember that we don’t offer any support for custom coding or related issues.

Thanks

[iTurtle]

hey wizard @Regnalf
thats fantastic! thanks so much!
i was sure it would be possible - but i just don’t know enough about css…
thing is. it does not work yet
i put the code in the slider container custom css and alternatively in the page custom css.
the transition time does not change.
i deleted the cache and set the time to 8s. but the slides still change very quickly (1 or 2 sec).
any idea why?
thanks again! kai

[Regnalf]

Oh, sorry for that, i needed the previous css for a effect transition.
If you want only the standard “fade” transition, you can use this css:

$el .x-slide
{
  transition-duration: 3s !important;
}

the other css is when you use effects mode.

You can also provide this code globaly or page wise, without the $el prefix in the global or page css section

.x-slide
{
  transition-duration: 3s !important;
}

If you want to further, you also can play with the transition-timing-function

[iTurtle]

@Regnalf perfect
i knew it was possible
thanks a million for your help and have a great day!
kai

[iTurtle]

has this been resolved? it seems to work here.
ps: upon testing i notice, that changing the duration does not show directly in the page in edit mode. only after save in preview mode the times are correct.

[tristup]

Hi Kai,

Glad to know that it is resolved now. And thank you @Regnalf for sharing the solution.

[iTurtle]

hi @tristup,
i really would love to see this option being adding soon.
its such no brainer…
best wishes, kai

[ruenel]

Thanks for the Feedback and it has been noted.