How to Create a Carousel using Bootstrap and jQuery

Submitted by: 
Language: 
Visitors have accessed this post 401 times.

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.

  1. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  3. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Add the Carousel

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

  1. <div id="myCarousel" class="carousel slide" data-ride="carousel">
  2. <!-- Indicators -->
  3. <ol class="carousel-indicators">
  4. <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  5. <li data-target="#myCarousel" data-slide-to="1"></li>
  6. <li data-target="#myCarousel" data-slide-to="2"></li>
  7. <li data-target="#myCarousel" data-slide-to="3"></li>
  8. </ol>
  9. <!-- Items -->
  10. <div class="carousel-inner">
  11. <div class="item active">
  12. <img src="img/1.jpg" alt="First Image">
  13. <div class="carousel-caption">
  14. <h4 class="text-center">First Slide</h4>
  15. </div>
  16. </div>
  17. <div class="item">
  18. <img src="img/2.jpg" alt="Second Image">
  19. <div class="carousel-caption">
  20. <h4 class="text-center">Second Slide</h4>
  21. </div>
  22. </div>
  23. <div class="item">
  24. <img src="img/3.jpg" alt="Third Image">
  25. <div class="carousel-caption">
  26. <h4 class="text-center">Third Slide</h4>
  27. </div>
  28. </div>
  29. <div class="item">
  30. <img src="img/4.jpg" alt="Fourth Image">
  31. <div class="carousel-caption">
  32. <h4 class="text-center">Fourth Slide</h4>
  33. </div>
  34. </div>
  35. </div>
  36. <!-- Controls -->
  37. <a class="left carousel-control" href="#myCarousel" data-slide="prev">
  38. <span class="glyphicon glyphicon-chevron-left"></span>
  39. <span class="sr-only">Previous</span>
  40. </a>
  41. <a class="right carousel-control" href="#myCarousel" data-slide="next">
  42. <span class="glyphicon glyphicon-chevron-right"></span>
  43. <span class="sr-only">Next</span>
  44. </a>
  45. </div>

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:

  1. <div class="item active">
  2. <img src="img/1.jpg" alt="First Image">
  3. <div class="carousel-caption">
  4. <h4 class="text-center">First Slide</h4>
  5. </div>
  6. </div>

Active Indicator:

  1. <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

That ends this tutorial. Happy Coding :)


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.