Bootstrap 3 carousel transition speed

Admin 1
Viewed 64222

I'm running into a problem.

I've tried to do the following:

.carousel-inner > .item {
 position: relative;
 display: none;
 -webkit-transition: 0.6s ease-in-out left;
 -moz-transition: 0.6s ease-in-out left;
 -o-transition: 0.6s ease-in-out left;
 transition: 0.6s ease-in-out left;
}


In the bootstrap.js:

.emulateTransitionEnd(600)

But it doesn't seem to work properly. The animation speeds up. But I use a carousel-caption that contains text, which bugs. It slides properly, but then the .content-caption moves all the way to the left, disappears, and appears in it's normal position.

Is there any other variable I need to change?

carousel twitter-bootstrap css
6 Answers

This works for me in Bootstrap 4.1

#MyCarousel .carousel-item { transition: transform 1s ease-in-out; }

Change 1s to any duration. Using an id for your carousel will automatically override Bootstrap, and allows you to use different speeds for different carousels.

user_102882000
Related