Carousel Transition Speed

I Need Help
1

Hi everyone, I see there’s an earlier thread concerning this:

but this code no longer seems to work in Blocs 4, so does anyone know how to slow down the transition between pictures in the carousel? Not the time the pictures are showing, but the fade between them.

Or, is there a bric/bloc that I can purchase which makes this an easier option, while still being able to use some code the fix the height of the carousel?

Thanks everyone.

2

I don’t know the exact answer to your question but would add a small observation that points like this are often taken out of our control with factors like the user’s device speed or the internet connection.

There have been times when I thought a Blocs website was slower loading than I would like on my old Android, but then tried it on my daughter’s iPhone and it opened in the blink of an eye. The point is that certain ideas like this can be rendered fairly academic in practice.

1 Like
3

Understood @Flashman, and thoroughly agree.

It’s just that in use, the default of 0.6s (I think) seems very short.

4

I bet it would take longer on my Android :wink:

I would have thought this is a reasonable case for making a feature request as a wish list post.

2 Likes
5

Hi TrevReav
I see this post was longtime ago…and others may have sorted out and have better resolve …but… we were needing to update a x fade…and I saw your post…This seems to work for Bootstrap 4 projects… we were after a verrry slow fade on the carousel … only using 2 slides…I guess you would add further indices and change transition speed as you go…I had some -webkit attached but deleted as thought redundant)?!)

I set carousel auto play to 3000 and added this to the header

.carousel-fade .carousel-item { opacity: 0; transition-property: opacity; } .carousel-fade .carousel-item.active, .carousel-fade .carousel-item-next.carousel-item-left, .carousel-fade .carousel-item-prev.carousel-item-right { z-index: 1; opacity: 1; transition: 5.0s 0s opacity; } .carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-right { z-index: 0; opacity: 0; transition: 0s 7.0s opacity; }

all the best

6

Hi @sqpeg, that’s great thanks. As it happens, I’ll be working in the next version of a site I did a while ago very soon, so this may come in useful.
Cheers.