Why does my carousel jump when going from last to first slide?

I’ve got a carousel that I’m using for a text banner and when it slides from the last item to the first item, it briefly shows the first item text all the way over to the left. I assume because of the float left in the carousel-item css.

How can I stop this from happening? if I remove the float left, then the next text appears underneath the banner for a brief second, which is worse.


I don’t see a jump on any of them in Firefox on Mac. Looks to me like the first one is set with animation to slide in? or something similar maybe? Looks fine to me though. Try clearing your browser cache and see if that helps at all.

1 Like

Seems like weird animation on the slide or sum i dont see any jump or anything.

1 Like

Thanks. Clearing the cache didn’t help. And it happens on Chrome, Edge and Firefox at my end.

I haven’t changed any of the animation settings since pulling it from the library. It’s like there is a delay in formatting the text to the centre, but then why would it only happen on the transition from the last to the first slide?

Weird. I took a little video but I don’t think I can upload it here… hang on… - YouTube

Ok, I put a text-align:center on my .banner-slide class and it seems to have solved it. Relieved but confused. Just another day then :slight_smile:

Ya there are a handful of components (Bootstrap and not) that mess up the first slide or transition when starting out, but seem to iron out after that. Glad you got it worked out, ain’t not tellin what the deal is there lol, but if it works, don’t fix it! :stuck_out_tongue: