Step by step how to use the Carousel Widget of the Twitter Bootstrap in MVC

How to add a Carousel Component of the Twitter Bootstrap to your MVC app or your web page? Here we exemplify how you can show an outstanding carousel in your website. The Twitter Bootstrap includes many open source plugins and widgets to import to your web page, with proved responsiveness and elegant design, which adapt themselves to the mobile or tablet device when size decreases.

In this tutorial we'll make use of the JavaScript Carousel Plugin of the Bootstrap.

We suppose you have installed the Twitter Bootstrap in your MVC app. If you don't, learn  in this tutorial how to setup.

In just 5 minutes we'll build a responsive web page using the  Carousel Widget  Component of the Twitter Bootstrap :

The Twitter Bootstrap can be reached & downloaded from the Bootstrap official site : Bootstrap :

Create an HTML web page or an MVC View, but make sure to load the CSS and the .js jQuery scripts in the page:

TWITTER BOOTSTRAP  CAROUSEL Widget 

Go to the Bootstrap and copy the  Carousel Widget  markup : 

Then paste it inside your MVC View or your HTML page, making the necessary changes to customize the Carousel to your App. I remarked in red the essential properties to declare , in order to transform the <div>s into a Carousel. You can COPY-PASTE this customized Carousel markup :

<div id="carousel" class="carousel slide col-lg-4" data-interval="2000" data-ride="carousel">                <ol class="carousel-indicators">                    <li data-target="#carousel" data-slide-to="0" class="active"></li>                    <li data-target="#carousel" data-slide-to="1"></li>                    <li data-target="#carousel" data-slide-to="2"></li>                    <li data-target="#carousel" data-slide-to="3"></li>                    <li data-target="#carousel" data-slide-to="4"></li>                    <li data-target="#carousel" data-slide-to="5"></li>                </ol>                <div class="carousel-inner" >                    <div class="item active">                        <img src="Images/Bulbophyllum.jpg" alt="Bulbophyllum" />                        <div class="carousel-caption">                            <b>Bulbophyllum</b>                        </div>                    </div>                    <div class="item">                        <img src="Images/Cattleya.jpg" alt="Cattleya" />                        <div class="carousel-caption">                            <b>Cattleya</b>                        </div>                    </div>                                    </div>                <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">                    <span class="glyphicon glyphicon-chevron-left"></span>                </a>                <a class="right carousel-control" href="#carousel" role="button" data-slide="next">                    <span class="glyphicon glyphicon-chevron-right"></span>                </a>            </div>

As you see, we declare a "carousel slide" class, and define a data-interval in milliseconds, and a data-ride to start the animation on page load. Then we define an <OL> "carousel-indicator" , which exactly the number of slides in the carousel-inner <div>. Finally, we create the Carousel controls as follows:

If the size of the pictures is very varied, you can set it in your CSS as follows:

img {    width:390px !important;    height:360px !important;    }

Save & refresh the web page :

And of course, the Carousel is perfectly responsive in mobiles and tablets:

That's all!!  In this tutorial we've learned how to use the Carousel Widget   Component of the Twitter Bootstrap as a Menu. 

Happy programming.....
        By Carmel Schvartzman

כתב: כרמל שוורצמן