Bootstrap Carousel

In bootstrap, carousel component is useful to create a slideshow by cycling through the series of elements such as images, slides of text or custom markup.

 

By using the bootstrap carousel component, we can create slideshows with previous/next controls and indicators based on our requirements.

 

To create a carousel in bootstrap, we need to use the following classes to define the slides, previous/next controls and indicators for carousel.

 

ClassDescription
carousel This class is useful to create a carousel.
slide This class is useful to add CSS transition and animation effect to the slides while switching from one slide to another.
carousel-indicators This class is useful to add indicators to the carousel.
carousel-inner This class is useful to add slides to the carousel.
carousel-item This class is useful to specify the slides for carousel.
carousel-control-prev This class is useful to add previous button to the carousel to allow users go back between the slides.
carousel-control-prev-icon This class is useful to add previous (left) icon to the carousel.
carousel-control-next This class is useful to add next button to the carousel to allow users go forward between the slides.
carousel-control-next-icon This class is useful to add next (right) icon to the carousel.

Following is the example of creating the carousel with previous/next controls and indicators in bootstrap.

 

Live Preview

<!--Carousel-->

<div id="carouselExample" class="carousel slide" data-ride="carousel">

    <!--Carousel Indicators-->

    <ol class="carousel-indicators">

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

        <li data-target="#carouselExample" data-slide-to="1"></li>

        <li data-target="#carouselExample" data-slide-to="2"></li>

    </ol>

    <!--Carousel Slides-->

    <div class="carousel-inner">

        <div class="carousel-item active">

            <img src="city.jpg" alt="City">

        </div>

        <div class="carousel-item">

            <img src="lake.jpg" alt="Lake">

        </div>

        <div class="carousel-item">

            <img src="tree.jpg" alt="Tree">

        </div>

    </div>

    <!--Carousel Previous Next Controls-->

    <a class="carousel-control-prev" href="#carouselExample" data-slide="prev">

        <span class="carousel-control-prev-icon"></span>

    </a>

    <a class="carousel-control-next" href="#carouselExample" data-slide="next">

        <span class="carousel-control-next-icon"></span>

    </a>

</div>

If you observe the above example, we created carousel with slides, previous/next controls and indicators by specifying the required classes. Here, adding previous/next controls and indicators to carousel are optional and carousel will not control the slide dimensions, so you need to add your custom styles to make the slides in appropriate size.

 

The above example will return the result like as shown below.

 

Bootstrap carousel example result

Bootstrap Carousel Slides with Captions

In bootstrap carousel, you can add captions to each slide by adding .carousel-caption element within any .carousel-item element like as shown below.

 

Live Preview

<div class="carousel-inner">

    <div class="carousel-item active">

        <img src="city.jpg" alt="City">

        <div class="carousel-caption">

            <h5>Metro City</h5>

            <p>Metro cities are occupied with more humans.</p>

        </div>

    </div>

    <div class="carousel-item">

        <img src="lake.jpg" alt="Lake">

        <div class="carousel-caption">

            <h5>River Pond</h5>

            <p>River and pond difference is water movement.</p>

        </div>

    </div>

    <div class="carousel-item">

        <img src="tree.jpg" alt="Tree">

        <div class="carousel-caption">

            <h5>River Tree</h5>

            <p>Tree in the river pond.</p>

        </div>

    </div>

</div>

The above example will return the result like as shown below.

 

Bootstrap carousel with captions example result

Bootstrap Carousel with Crossfade

In case, if you want your carousel to animate the slides with fade transition instead of slide, you need to add .carousel-fade class to your carousel like as shown below.

 

Live Preview

<!--Carousel-->

<div id="carouselExample" class="carousel slide carousel-fade" data-ride="carousel">

    <!--Carousel Indicators-->

    <ol class="carousel-indicators">

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

        <li data-target="#carouselExample" data-slide-to="1"></li>

        <li data-target="#carouselExample" data-slide-to="2"></li>

    </ol>

    <!--Carousel Slides-->

    <div class="carousel-inner">

        <div class="carousel-item active">

            <img src="city.jpg" alt="City">

        </div>

        <div class="carousel-item">

            <img src="lake.jpg" alt="Lake">

        </div>

        <div class="carousel-item">

            <img src="tree.jpg" alt="Tree">

        </div>

    </div>

    <!--Carousel Previous Next Controls-->

    <a class="carousel-control-prev" href="#carouselExample" data-slide="prev">

        <span class="carousel-control-prev-icon"></span>

    </a>

    <a class="carousel-control-next" href="#carouselExample" data-slide="next">

        <span class="carousel-control-next-icon"></span>

    </a>

</div>

Bootstrap Enable Carousel via JavaScript

In bootstrap, by using carousel() method you can enable the carousel for particular element with id or class using JavaScript like as shown below.

 

Live Preview

<script>

    $(function() {

        $('#carouselExample').carousel();

        // Enable carousel previous/next controls

        $(".carousel-control-prev").click(function() {

            $("#carouselExample").carousel('prev');

        });

        $(".carousel-control-next").click(function() {

            $("#carouselExample").carousel('next');

        });

        // Enable carousel indicators

        $("#cityslide").click(function() {

            $("#carouselExample").carousel(0);

        });

        $("#lakeslide").click(function() {

            $("#carouselExample").carousel(1);

        });

        $("#treeslide").click(function() {

            $("#carouselExample").carousel(2);

        });

    });

</script>

Bootstrap Carousel Options

In bootstrap, you can pass different options to carousel() method to customize the carousel based on your requirements.

 

Following are the few of important options which we can pass to carousel() method in bootstrap.

 

NameTypeDefaultDescription
interval number 5000 It is useful to specify the time delay between slides.
keyboard boolean true It is useful to specify whether carousel should react to keyboard events or not.
pause string | boolean "hover" It is useful to pause the carousel from going through the next slide on mouseenter and resumes the sliding on mouseleave. If we set pause to false, the carousel won't pause on hover.
ride string false It is useful to autoplay the carousel on load or after user manually slide the carousel first item.
wrap boolean true It is useful to specify whether the carousel should go through all the slides continuously or stop at the last slide.
touch boolean true It is useful to specify whether the carousel should support left/right swipe interactions on touchscreen devices.

The above carousel options can set either through the data attributes or JavaScript. Following is the example of passing the options through JavaScript to the carousel() method. 

 

Live Preview

<script>

    $(function() {

        // Enable Carousel

        $('#carouselExample').carousel({

            interval: 500,

            pause: "hover",

            wrap: false

        });

    });

</script>

If you observe the above code, we are passing multiple options to carousel() method by using JavaScript.

Bootstrap Carousel Methods

Same like above carousel options, we have different carousel() methods to perform operations like slide, stop, pause, etc. on carousel slides based on our requirements.

 

MethodDescription
.carousel(options) It is useful to attach carousel options.
.carousel('cycle') It is useful to cycles through the carousel items from left to right.
.carousel('pause') It is useful to stop the carousel from cycling through items.
.carousel(number) It is useful to cycle the carousel to a particular slide (0: first item, 1: second item, etc.)
.carousel('prev') It is useful to go back to previous item.
.carousel('next') It is useful to navigate to next item.
.carousel('dispose') It is useful to destroy a carousel.

Following is the example of using carousel() methods to perform operations like slide, stop, pause, etc. on carousel slides in bootstrap.

 

Live Preview

<script>

    $(function() {

        $('#carouselExample').carousel();

        // Enable carousel previous/next controls

        $(".carousel-control-prev").click(function() {

            $("#carouselExample").carousel('prev');

        });

        $(".carousel-control-next").click(function() {

            $("#carouselExample").carousel('next');

        });

        // Enable carousel indicators

        $("#cityslide").click(function() {

            $("#carouselExample").carousel(0);

        });

        $("#lakeslide").click(function() {

            $("#carouselExample").carousel(1);

        });

        $("#treeslide").click(function() {

            $("#carouselExample").carousel(2);

        });

    });

</script>

Bootstrap Carousel Events

In bootstrap, the carousel classes are having few events for hooking into carousel functionality to fire the events during sliding the carousel items.

 

EventDescription
slide.bs.carousel This event will fire immediately when the slide instance method is invoked.
slid.bs.carousel This event will fire when carousel completed its slide transition.

Following is the example of using the events to show the alert message during sliding the carousel items in bootstrap.

 

Live Preview

<script>

    $(function() {

        // Enable Carousel

        $('#carouselExample').carousel();

        // Enable carousel previous/next controls

        $(".carousel-control-prev").click(function() {

            $("#carouselExample").carousel('prev');

        });

        $(".carousel-control-next").click(function() {

            $("#carouselExample").carousel('next');

        });

        // Enable carousel indicators

        $("#cityslide").click(function() {

            $("#carouselExample").carousel(0);

        });

        $("#lakeslide").click(function() {

            $("#carouselExample").carousel(1);

        });

        $("#treeslide").click(function() {

            $("#carouselExample").carousel(2);

        });

        $("#carouselExample").on('slide.bs.carousel', function() {

            alert('The next slide now will begin to cycle.');

        });

        $('#carouselExample').on('slid.bs.carousel', function() {

            alert("The cycling of the carousel has been completed!");

        });

    });

</script>

This is how we can use bootstrap carousel in our applications to create the slideshows based on our requirements. 

Topics Covered