Carousel image transition speed

I Need Help
1

Hey all, does anyone know how to change the speed at which the images transition in a photo carousel? I’d like them to be a bit lazier than they are by default. The ‘Speed’ setting in the ‘Animation’ section doesn’t affect the carousel behavior. Thanks in advance for any helpful suggestions!

2

Carousel image transition speed

Side Panel > Appearance > Duration

Note: the interval is in milliseconds, 1000 = 1 second.

3

@Blocs_User, Thank You for the reply. I’m aware of that setting, but I mean the amount of time it takes to actually make the transition once it begins. I’ve got the Duration set to 5 seconds and would like the speed at which one photo changes to the next to be a bit slower and more gradual…

4

Hi @Creative

The default transition is set to .6s. To override it you can set the following code to the the page settings under header: Here the transition is set to 2 seconds:

<style>

.carousel-item {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: -webkit-transform 2s ease-in-out;
    transition: transform 2s ease-in-out;
    transition: transform 2s ease-in-out, -webkit-transform 2s ease-in-out
}
</style>

MDS

1 Like
5

Sorry for my misunderstanding. :wink:

1 Like
6

@Blocs_User, no worries at all and thanks again for trying to help me! :slight_smile:

7

@MDS, I will try that, thank you!

8

@MDS, is the class ‘.carousel-item’ the default name for the carousel, or do I need to create a class by that name that jives with this style rule? Thanks again!

9

No need to create a class. Though in this fashion it will be applied to all carousels on the same page If you have more than one carousel then you need to add the carousel ID.

MDS

10

Hi, just come across this, and it does the job nicely. Slide speeds are set to 5000, I’ve changed all of the 2s to 4s and the fades are taking 4seconds, perfect!
However, the one problem I’m having is that I’m getting a white flash (page background?) between each slide. Any ideas anyone?
There is another bit of code in the page header setting a z-index for another item on the page, could this be a problem?
Thanks