fbpx
30 C
Lahore

How to Change Bootstrap Carousel Slide Speed

Must read

Ayyaz Zafarhttps://www.ayyaztech.com
I am Full Stack Web Developer with 10 years of professional Experience. I have following Skills: HTML5, CSS3, Javascript, jQuery, Ajax, PHP, MySQL, jQuery, Angular, React.js, Wordpress, Codeigniter, Laravel, Node.js, Mongo DB, Express.js, GraphQL, Typescript, Apollo and many more..

The speed cannot be controlled by the API. Though you can modify CSS that is in charge of that. find in the bootstrap.css file:

.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;
}

and change 0.6s to the time you want. You also might want to edit time in the function call below:

.emulateTransitionEnd(2000)

at bootstrap.js in function Carousel.prototype.slide. That synchronize transition and prevent slide to disapear before transition ends.

Source: http://stackoverflow.com/questions/17332431/how-can-i-control-the-speed-that-bootstrap-carousel-slides-in-items/17332516#17332516

- Advertisement -spot_img

More articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest article