How to Create Bootstrap Carousel Slider

Pradeep Maurya

7 years ago

In this article we will learn “How to create Bootstrap Carousel slider” with different types of carousel functionality. There are lot’s of jQuery slidershow plugins are available to create crousel slider for cycling through elements. If web application uses Bootstrap framework, an additional jQuery pligins is not required to slideshow elements like a carousel. Bootstrap JS Carousel (carousel.js) provides an simple way to use a carousel slider on the web page.

In this Step, we will show you our example code, with the help of this code you can extend the bootstrap carousel functionality and create different types of carousel slider.

Before we get started with carsusel bootstrap slider, include the below bootstrap and jQuery library between <head></head> tags.


<!-- 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>

The above code provide bootstrap CSS and jQuery functionality of slider.

Bootstrap Carousel Slider: Copy and paste the following code into index.html file after <body> tags.

index.html


<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/banner1.jpg" alt="">
        </div>
        <div class="item">
            <img src="images/banner2.jpg" alt="">
        </div>
        <div class="item">
            <img src="images/banner3.jpg" 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>

</ol>

</div>

</div>

</div>

<span class="sr-only">Previous</span>

</a>

</a>

</div>

Javascript Code:

copy and paste the following javascript code before </body> tags.


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

// 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 needs.

Intervel (Number) – Specifies the amount of time to delay between automatically cycling. Set “false” to stop cycling. Default delay time is 5000 miliseconds.
pause – Set “false” to stop pause cycling on hover
wrap – The default value is true.
keyboard – The default value is true

How to use Carousel Option:


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

$('.carousel').carousel({

interval: 8000,

pause:true,

wrap:false

});

</script>

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

Support

If you need any help regarding this tutorials please feel free to comment we love to help you or you need all code file please contact us.

[sociallocker]

Download Source Code View Demo

[/sociallocker]

Pradeep Maurya

Pradeep Maurya is the Professional Web Developer & Designer and the Founder of “Tutorials website”. He lives in Delhi and loves to be a self-dependent person. As an owner, he is trying his best to improve this platform day by day. His passion, dedication and quick decision making ability to stand apart from others. He’s an avid blogger and writes on the publications like Dzone, e27.co