Carousel Speed ​​5

Question

I have a problem.

I 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 does not work properly. The animation is accelerating. But I use a headline with a carousel containing text that contains errors. It slides correctly, but then the .content header moves all the way to the left, disappears and the normal position appears in it.

Is there any other variable that I need to change?

Answer 1

visit: http://getbootstrap.com/javascript/#carousel

Add the following value at the end of the html file to set the transition speed: 10000 (10 seconds)

  <script src="../../dist/js/bootstrap.min.js"></script> <script> $('.carousel').carousel({ interval: 10000 }); </script> 

Answer 2

Here is an easy way:

Add "data-interval="2000" to the html. For example: <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000">

Answer 3

To change the current slide speed, not the transition time, since I use LESS, I found myself adding this to my custom.less (which first imports all the other LESS bootstrap files):

 @slideSpeed: 2s .carousel-inner { > .item { .transition(@slideSpeed ease-in-out left); @media all and (transform-3d), (-webkit-transform-3d) { transition: transform @slideSpeed ease-in-out; } } } 

Hope this helps someone like @ToolmakerSteve or me in the future.

It calls a constant in bootstrap.js there, which I had to change to a parameter (see below "duration")

  Carousel.DEFAULTS = { interval: 5000, pause: 'hover', wrap: true, keyboard: true, duration: 600 } 

and replace:

  //.emulateTransitionEnd(Carousel.TRANSITION_DURATION) .emulateTransitionEnd(this.options.duration) 

Then I can add data-duration = "1000" to my markup.

Answer 4

Those using bootstrap 4 scss can use this variable :)

 $carousel-transition: transform .6s ease-in-out !default; 

Answer 5

 .carousel-inner>.item { -webkit-transition: 0.9s ease-in-out left; transition: 0.9s ease-in-out left; -webkit-transition: 0.9s, ease-in-out, left; -moz-transition: .9s, ease-in-out, left; -o-transition: .9s, ease-in-out, left; transition: .9s, ease-in-out, left; }