How to Create a Carousel using Bootstrap and jQuery

Adding Dependency

First, we are going to add the dependencies for the carousel to work and in this tutorial, I've used CDN so you need internet connection for them to work. Include the ff dependecies in header for the Boostrap 3.3.7 CSS or you can put the jQuery and Bootstrap 3.3.7 JS at the bottom of body tag. Note: Always declare jQuery first than your Bootstrap JS since Bootstrap JS needs jQuery for some of its functions.

Add the Carousel

Next we add the whole Carousel on our body. The place where you want to put this is up to you.

First Slide

Second Slide

Third Slide

Fourth Slide

Previous Next

The id of our Carousel is myCarousel which is defined as id="myCarousel" data-ride="carousel" tells bootstrap to start animating the carousel as the page loads. Make sure to put 1 active item and indicator to indicate specify a starting point as the page loads as seen like this. Active Item:

First Slide

Active Indicator:

That ends this tutorial. Happy Coding :)