How to Create a Carousel using Bootstrap and jQuery

Submitted by nurhodelta_17 on Saturday, January 27, 2018 - 22:58.

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.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<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.

<div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
                 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                 <li data-target="#myCarousel" data-slide-to="1"></li>
                 <li data-target="#myCarousel" data-slide-to="2"></li>
                 <li data-target="#myCarousel" data-slide-to="3"></li>
        </ol>
        <!-- Items -->
        <div class="carousel-inner">
                <div class="item active">
                        <img src="img/1.jpg" alt="First Image">
                        <div class="carousel-caption">
                                <h4 class="text-center">First Slide</h4>
                        </div>
                </div>
                <div class="item">
                        <img src="img/2.jpg" alt="Second Image">
                        <div class="carousel-caption">
                                <h4 class="text-center">Second Slide</h4>
                        </div>
                </div>
                <div class="item">
                        <img src="img/3.jpg" alt="Third Image">
                        <div class="carousel-caption">
                                <h4 class="text-center">Third Slide</h4>
                        </div>
                </div>
                <div class="item">
                        <img src="img/4.jpg" alt="Fourth Image">
                        <div class="carousel-caption">
                                <h4 class="text-center">Fourth Slide</h4>
                        </div>
                </div>
        </div>
        <!-- Controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">Next</span>
        </a>
</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:

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

Active Indicator:

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

That ends this tutorial. Happy Coding :)

Add new comment

203 views