How to Create a Carousel using Bootstrap and jQuery
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.
- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
Add the Carousel
Next we add the whole Carousel on our body. The place where you want to put this is up to you.
- <div id="myCarousel" class="carousel slide" data-ride="carousel">
- <!-- Indicators -->
- <ol class="carousel-indicators">
- <!-- Items -->
- <div class="carousel-inner">
- <div class="item active">
- <img src="img/1.jpg" alt="First Image">
- <img src="img/2.jpg" alt="Second Image">
- <img src="img/3.jpg" alt="Third Image">
- <img src="img/4.jpg" alt="Fourth Image">
- <!-- Controls -->
- <a class="left carousel-control" href="#myCarousel" data-slide="prev">
- <a class="right carousel-control" href="#myCarousel" data-slide="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.
That ends this tutorial. Happy Coding :)