How to Create Carousel Slider with Bootstrap

There are various jQuery slideshow plugins are available for cycling through elements. But if the web application uses Bootstrap framework, an additional jQuery plugin is not needed to slideshow elements like a carousel. Bootstrap JS Carousel (carousel.js) provides an easy way to implement a carousel slider on the web page.

In this tutorial, we’ll show you how to create a carousel image slider with Bootstrap. Also, using our example code, you can extend the Bootstrap carousel functionality and create the different types of the slider.

Before you get started with Bootstrap carousel, include the Bootstrap and jQuery library first.

<!-- Compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<!-- Minified JS library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>

Carousel Slider with Bootstrap

The following example creates a basic carousel slider.

<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>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="images/image-1.jpg" alt="">
        </div>
        <div class="item">
            <img src="images/image-2.jpeg" alt="">
        </div>
        <div class="item">
            <img src="images/image-3.jpeg" alt="">
        </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>

Bootstrap Carousel Slider with Captions

The following example creates a carousel slider and adds captions to slides.

<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>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="images/image-1.jpg" alt="">
            <div class="carousel-caption">
                <h3>First Slide</h3>
                <p>This is the first image slide</p>
            </div>
        </div>
  
        <div class="item">
            <img src="images/image-2.jpeg" alt="">
            <div class="carousel-caption">
                <h3>Second Slide</h3>
                <p>This is the second image slide</p>
            </div>
        </div>
        
        <div class="item">
            <img src="images/image-3.jpeg" alt="">
            <div class="carousel-caption">
                <h3>Third Slide</h3>
                <p>This is the third image slide</p>
            </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>

Bootstrap Carousel Slider with Custom Controls

The following example calls carousel manually and provides the custom controls to cycles previous and next item.

<div id="myCarouselCustom" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarouselCustom" data-slide-to="0" class="active"></li>
        <li data-target="#myCarouselCustom" data-slide-to="1"></li>
        <li data-target="#myCarouselCustom" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="images/image-1.jpg" alt="">
            <div class="carousel-caption">
                <h3>First Slide</h3>
                <p>This is the first image slide</p>
            </div>
        </div>
  
        <div class="item">
            <img src="images/image-2.jpeg" alt="">
            <div class="carousel-caption">
                <h3>Second Slide</h3>
                <p>This is the second image slide</p>
            </div>
        </div>
        
        <div class="item">
            <img src="images/image-3.jpeg" alt="">
            <div class="carousel-caption">
                <h3>Third Slide</h3>
                <p>This is the third image slide</p>
            </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>
<!-- Custom Controls -->
<a href="javascript:void(0);" id="prevBtn">Prev Slide</a>
<a href="javascript:void(0);" id="nextBtn">Next Slide</a>

JavaScript Code:

<script type="text/javascript">
// Call carousel manually
$('#myCarouselCustom').carousel();

// Go to the previous item
$("#prevBtn").click(function(){
    $("#myCarouselCustom").carousel("prev");
});
// Go to the previous item
$("#nextBtn").click(function(){
    $("#myCarouselCustom").carousel("next");
});
</script>

Carousel Options

The following options are available to configure Bootstrap Carousel as per your needs.

• interval (number) – Specifies the amount of time to delay between automatically cycling. Set false to stop automatically cycling. Default delay time is 5000 milliseconds.
• pause (string | null) – Pauses the cycling on mouseenter and resumes the cycling on mouseleave. Set false to stop pause cycling on hover. The default value is hover.
• wrap (boolean) – Specifies whether the carousel should cycle continuously or stop at last slide. The default value is true.
• keyboard (boolean) – Specifies whether the carousel should react to keyboard events. The default value is true.

How to Use Carousel Options

The following example shows how you can specify the carousel options.

<script type="text/javascript">
$('.carousel').carousel({
     interval: 8000,
     pause:true,
     wrap:false
});
</script>