Enhance Data Display using Carousel in Bootstrap

In this post we are going to learn about enhancing data display using carousel in Bootstrap. In our previous posts we have seen that how we can enhance data display using Tabs, using Accordion and using Scrollspy. A carousel is a paging data display which is ideal for looping through group of photos or advertisements.

Lets say you want to display a group of photos or a group of advertisements through scrolling one at a time, then you can use bootstrap Carousel. The carousel control is divided into four parts. The first part is the container for the carousel. Second part is the indicators for the current slide. Then the container for all the slides and lastly the navigation to allow the user to change slides.

Container : The container is a div element with classes carousel and slide. It will also have the attribute data-ride='carousel'. Along with the above classes and attributes it will also need an Id that will be used by carousel indicators.

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

Indicators : You need an ordered list container with the class carousel-indicators for the indicators. Indicators are the list item with data-target points to ID of the carousel's container and data-slide-to which indicates the carousel's position move when user clicked on the icon.

<ol class="carousel-indicators">
    <li data-target="#carousel" data-slide-to="0" class="active"></li>
    <li data-target="#carousel" data-slide-to="1"></li>
</ol>

Slides : The slides are contained inside a container having class carousel-inner. Each slide will be inside container having class item. Each slide can have images, text whatever you want.

<div class="carousel-inner">
    <div class="item active">
        <img />
        <div class="carousel-caption">
            <h3>#1</h3>
            <p>My Text</p>
        </div>
    </div>
</div>

Navigation : Navigation is provided by adding links to the bottom of the carousel's container. Each link have a class called carousel-control and the href points to the ID of the carousel. The data-slide attribute indicates if you want to go forwards or backwards. For the UI of the link you can use glyphicons. You can add it using span element with glyphicon and the class of the glyphicon you wish to display.

<a class="left carousel-control" href="#carousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
</a>

Example :

<div id="carousel" class="carousel slide" 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>
    </ol>
    <div class="carousel-inner">
      <div class="item active">
        <img alt="First Slide" src=""/>
        <div class="carousel-caption">
  <h3>#1</h3>
  <p>My Text</p>
</div>
      </div>
      <div class="item">
<img alt="Second Slide" src=""/>
<div class="carousel-caption">
  <h3>#2</h3>
  <p>My Text</p>
</div>
      </div>
    </div>
    <a class="left carousel-control" href="#carousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

Result :

Please Like and Share the Blog, if you find it interesting and helpful.

Related articles

• Introducing Navbar in Bootstrap - Part 1 
• Introducing Navbar in Bootstrap - Part 2 
• Enhance Data Display using Tabs in Bootstrap 
• Enhance Data Display using Scrollspy in Bootstrap 
• Getting Started with BootStrap 
• Little about BootStrap Classes 
• Control Content Placement in Bootstrap 
• Controlling Visibility in BootStrap 
• Introducing BootStrap Grid System 
• Integrate Colorbox in Asp Net Web Application