Carousel Sliders in Bootstrap

Goud.Kv
Posted by in Bootstrap category on for Intermediate level | Points: 250 | Views : 26117 red flag
Rating: 5 out of 5  
 1 vote(s)

Bootstrap is developed by Twitter Inc, and comes with predefined CSS and JavaScript. By using Bootstrap, we can design a very responsive website easily. It is very handy once you understand.
Recommendation
Read Accordion & Collapse in Bootstrap before this article.

Introduction

Please read Bootstrap Introduction if you are new to Bootstrap.
We have seen Sliding Images in many websites as because of using JQuery. Bootstrap comes with predefined CSS and JavaScript for the implementation of Sliding Carousels. 

Objective

The main objective of this article is to learn creating Sliders using Carousel of Bootstrap.

Using Bootstrap code

There are some predefined classes in bootstrap.css on behalf of Carousel. We are going to use them to create a Slider. Here, we are not using any Images and so please add below code of styles in your page,
<style>
    .item {
        background: #333;
        text-align: center;
        height: 300px !important;
    }
    h2 {
        margin: 0;
        color: #888;
        padding-top: 100px;
        font-size: 50px;
    }
</style>
In the above style, we are creating an item with background and height that we are going to use as the default Image. 
Lets create a Carousel Sliders with the below code,
<div class="thumbnail">
    <div id="DemoCarousel" class="carousel slide" data-interval="2000" data-ride="carousel">
        <!-- Carousel indicators -->
        <ol class="carousel-indicators">
            <li data-target="#DemoCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#DemoCarousel" data-slide-to="1"></li>
            <li data-target="#DemoCarousel" data-slide-to="2"></li>
        </ol>
        <!-- Carousel items -->
        <div class="carousel-inner">
            <div class="item active">
                <h2>Slide 1</h2>
                <div class="carousel-caption">
                    <h3>This is the First Label</h3>
                    <p>The Content of the First Slide goes in here</p>
                </div>
            </div>
            <div class="item">
                <h2>Slide 2</h2>
                <div class="carousel-caption">
                    <h3>This is the Second Label</h3>
                    <p>The Content of the second Slide goes in here</p>
                </div>
            </div>
            <div class="item">
                <h2>Slide 3</h2>
                <div class="carousel-caption">
                    <h3>This is the Third Label</h3>
                    <p>The Content of the Third Slide goes in here</p>
                </div>
            </div>
        </div>
        <!-- Carousel Controls -->
        <a class="carousel-control left" href="#DemoCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="carousel-control right" href="#DemoCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
</div>
If you observe the above code, we have used different types of Carousel elements such as carousel slide, carousel-indicators, carousel-inner, carousel-caption and carousel control.
And also data-interval for setting Duration.
Now run the above code in your browser and you will see the Sliding Carousel something shown in below figure

Using JavaScript:
We can also create the above Sliding Carousel by using JavaScript. For that we have to write little script to set actions as below,
<script type="text/javascript">
    $(document).ready(function () {
        $("#DemoCarousel").carousel();

        //Carousel Controls
        $(".left").click(function () {
            $("#DemoCarousel").carousel('prev');
        });
        $(".right").click(function () {
            $("#DemoCarousel").carousel('next');
        });

        //Carousel Indicators
        $(".slide-1").click(function () {
            $("#DemoCarousel").carousel(0);
        });
        $(".slide-2").click(function () {
            $("#DemoCarousel").carousel(1);
        });
        $(".slide-3").click(function () {
            $("#DemoCarousel").carousel(2);
        });
    });
</script>
In the above script, we have used Carousel functions like prev, next, and the numbers that indicates Index of the Slide.
Now, you can add your HTML code like below,
<div id="DemoCarousel" class="carousel slide" data-interval="2000" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li class="slide-1 active"></li>
        <li class="slide-2"></li>
        <li class="slide-3"></li>
    </ol>
    <!-- Items -->
    <div class="carousel-inner">
        <div class="item active">
            <h2>Item 1</h2>
            <div class="carousel-caption">
                <h3>This is the First Label</h3>
                <p>The Content of the First Slide goes in here</p>
            </div>
        </div>
        <div class="item">
            <h2>Item 2</h2>
            <div class="carousel-caption">
                <h3>This is the Second Label</h3>
                <p>The Content of the Second Slide goes in here</p>
            </div>
        </div>
        <div class="item">
            <h2>Item 3</h2>
            <div class="carousel-caption">
                <h3>This is the Third Label</h3>
                <p>The Content of the Third Slide goes in here</p>
            </div>
        </div>
    </div>
    <!-- Controls -->
    <a class="carousel-control left">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="carousel-control right">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>
Now run this combination in your browser to expect the same result like above which looks as

Pause:
There is a pause function for Carousel that is used to pause the sliding motion for a bit. 
<script type="text/javascript">
    $(document).ready(function () {
        $("#DemoCarousel").carousel({
            pause: 'hover'
        });
    });
</script>
In the above script, we are setting 'hover' which pauses the Carousel Cycling on Mouse Enter and resumes again on Mouse Leave.

Showing Alert on Sliding:
We can also display an alert message after the completion of sliding. Please look the below script
<script type="text/javascript">
$(document).ready(function () {
    $('#DemoCarousel').on('slid.bs.carousel', function () {
        alert("Sliding Done");
    });
});
</script>
slid.bs.carousel is the event that fires after the completion of slide transition and slide.bs.carousel which fires immediately slide instance method is invoked.

If you add the above script and run, you will see the output something like below

After the slide transition, it shows JavaScript's alert message.

Button Control Functions of Carousel:
We can also set the buttons to control the Carousel actions. Take a look at the below code and use that in your view,
<script type="text/javascript">
$(document).ready(function () {
    $("#DemoCarousel").carousel();

    //Carousel Actions
    $(".start").click(function () {
        $("#DemoCarousel").carousel('cycle');
    });
    $(".pause").click(function () {
        $("#DemoCarousel").carousel('pause');
    });

    //Carousel Controls
    $(".prevSlide").click(function () {
        $("#DemoCarousel").carousel('prev');
    });
    $(".nextSlide").click(function () {
        $("#DemoCarousel").carousel('next');
    });

    //Carousel Indicators
    $(".slide-1").click(function () {
        $("#DemoCarousel").carousel(0);
    });
    $(".slide-2").click(function () {
        $("#DemoCarousel").carousel(1);
    });
    $(".slide-3").click(function () {
        $("#DemoCarousel").carousel(2);
    });
});
</script>
The above script demonstrates the Carousel functions that are being used from Bootstrap.
Now HTML as,
<div id="DemoCarousel" class="carousel slide" data-interval="2000" data-ride="carousel">
    <div class="carousel-inner">
        <div class="item active">
            <h2>Item 1</h2>
            <div class="carousel-caption">
                <h3>This is the First Label</h3>
                <p>The Content of the First Slide goes in here</p>
            </div>
        </div>
        <div class="item">
            <h2>Item 2</h2>
            <div class="carousel-caption">
                <h3>This is the Second Label</h3>
                <p>The Content of the Second Slide goes in here</p>
            </div>
        </div>
        <div class="item">
            <h2>Item 3</h2>
            <div class="carousel-caption">
                <h3>This is the Third Label</h3>
                <p>The Content of the Third Slide goes in here</p>
            </div>
        </div>
    </div>
</div>
<br />

<!-- Control Buttons -->
<div style="text-align:center;">
    <input type="button" class="btn btn-success start" value="Start" />
    <input type="button" class="btn btn-danger pause" value="Pause" />
    <input type="button" class="btn btn-warning slide-1" value="Slide-1" />
    <input type="button" class="btn btn-warning slide-2" value="Slide-2" />
    <input type="button" class="btn btn-warning slide-3" value="Slide-3" />
    <br />
    <ul class="pager">
        <li class="prevSlide"><a href="#">Previous</a></li>
        <li class="nextSlide"><a href="#">Next</a></li>
    </ul>
</div>
Run this combination of code to create a beautiful Carousel along with controlling buttons like below,
 

Conclusion

In this article, we have seen creating Carousels in different ways using Bootstrap. Hope you understand. If you have any doubts in this topic, feel free to ask below.

Thanks for reading.

Regards,
Krishna.

Recommendation
Read ScrollSpy in Bootstrap after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Goud.Kv
Full Name: Krishna Vamshi Goud
Member Level: Gold
Member Status: Member,MVP
Member Since: 2/12/2014 2:34:09 AM
Country: India
Thanks & Regards, Krishna


Login to vote for this post.

Comments or Responses

Posted by: Jayakumars on: 7/4/2014 | Points: 25
hi
Goud

I need using Bootstrap Layout and insert this fields to db name,dob,Empno,amount using validation
and Crud operations how will do this mvc4 and Bootstrap templates
Posted by: Goud.Kv on: 7/4/2014 | Points: 25
Hello Kumar.,

Yes., you can do this easily in MVC.,
For CRUD, use Bootstrap Forms at http://www.dotnetfunda.com/articles/show/2873/working-with-forms-in-bootstrap-part-1.
And you can also use lot of Bootstrap styles such as panels, wells, thumbnails etc.

Please follow my articles to understand it very easily.

Thanks
Krishna.

Login to post response

Comment using Facebook(Author doesn't get notification)