Individual Carousel speeds and transitions

[quirin]

Re: Carousel autoplay speed

While this works perfectly for me to address different fading durations with assigned classes for my carousel elements:

.slowcarousel .lay-carousel.transition-fading .lay-carousel-slide.transition {
    -webkit-transition: opacity 3500ms ease-out !important;
    -o-transition: opacity 3500ms ease-out !important;
    transition: opacity 3500ms ease-out !important;
}

.fastcarousel .lay-carousel.transition-fading .lay-carousel-slide.transition {
    -webkit-transition: opacity 1500ms ease-out !important;
    -o-transition: opacity 1500ms ease-out !important;
    transition: opacity 1500ms ease-out !important;
}

...i cannot assign individual speeds for when the slide transitions actually start. Meaning that all carousel transitions always start at the same time from the predefined

and only the duration of the fading is different.

Now i also tried what you already proposed to also vary the transition start by:

.slowcarousel .swiper-wrapper {
    transition-duration: 5000ms !important;
}

.fastcarousel .swiper-wrapper {
    transition-duration: 3000ms !important;
}

...without any success.
Am I somehow missing a value for the overall transition here?

[quirin]

@quirin said in Individual Carousel speeds and transitions:

-webkit-transition: opacity 1500ms ease-out !important;
-o-transition: opacity 1500ms ease-out !important;
transition: opacity 1500ms ease-out !important;

i actually managed to get the effect i wanted by using a transition-delay. So if you only want variable fading speeds with shifted transitions that is all the custom code you need:

.fastcarousel .lay-carousel-slide.transition{
    transition-duration: 1000ms !important;
}


.slowcarousel .lay-carousel-slide.transition{
    transition-duration: 2000ms !important;
		transition-delay: 1000ms !important;
}

But i still didn't figure out how to assign the Autoplay Speed individually, which is still inherited from Lay Options for all carousels on my page. Would be interesting to know if there is a possibility!

Best,
Q

[arminunruh]

hey not sure if this can be done from your side.
because i think i need to change the javascript to do this properly.

i'm adding this as a feature for the next update.

if you'd code something by yourself i think you'd need
https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay

but i think that would delay every change of the slide :D