How to Change Bootstrap Carousel Slide Speed


Bootstrap 3 Framework provides the Carousel feature as a part of its core API. By default the elements in a Carousel slide to the next with a default time interval of 0.6 seconds ie 600ms. If you wish to change this time limit then you need to make in the CSS file provided.

Steps to provide a custom time limit for Bootstrap Carousel Slides

Note that you are not working with CDN links for Bootstrap CSS and JavaScript file. If you are then just download the css file on your locally.

Open bootstrap.css its good that you work on this version and then minify it later.

Look for class carousel-inner > .item
.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;
}

You must change transition time here from .6s to the value you want and save.

Now open bootstrap.js file and change .emulateTransitionEnd(600) value from 600ms to the value you want.

This should get the work done! But do not that you must be working with the Bootstrap framework API version 3.0 or higher or else the code may be different.

Advertisements
Try Out Code2care Dev Tools:

Advertisements



Android Java Linux Microsoft Google Python macOS Notepad++ Microsoft Teams CSS PHP SharePoint Html Linux C Programs Bootstrap jQuery Sublime Android Studio Facebook Eclipse WhatsApp News MySQL Json HowTos JavaScript FTP S3


Advertisements


Code2care is an initiative to publish and share varied knowledge in programming and technical areas gathered during day-to-day learnings and development activities.

Students and Software Developers can leverage this portal to find solutions to their various queries without re-inventing the wheel by referring to our easy to understand posts. Technical posts might include Learnings, Tutorials, Trouble-Shooting steps, Video Tutorials, Code Snippets, How Tos, Blogs, Articles, etc.
🎉 We are celebrating the 10th years of Code2care! Thank you for all your support! We hope we made a difference.
We strong support Gender Equality & Diversity.

We stand in solidarity with Ukraine - Make a donation to UNHCR - https://donate.unhcr.org/in/en-in/ukraine-emergency