jQuery and Bootstrap Based Carousel with Image Annotations

A simple and responsive image carousel plugin built with jQuery and Bootstrap 3 that allows you to add custom image annotations using Bootstrap popover widget.

How to use it:

1. Include the Font Awesome and Bootstrap's CSS in the head section of your page.

<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

2. Create the Html for a tooltip carousel with custom image annotations using data-* attributes.

<div class="carousel-tooltip">
  <div class="caraousel-tooltip-item active" data-index="0"> <a href="#" class="tooltip-carousel" style="top:100px;left: 100px;padding:5px 10px;background:#f00;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> <span class="fa fa-heart"></span> </a> <a href="#" class="tooltip-carousel" style="top:120px;left: 400px;padding:5px 10px;background:#000;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> <span class="fa fa-star"></span> </a> </div>
  <div class="caraousel-tooltip-item" data-index="1"> <a href="#" class="tooltip-carousel" style="top:120px;left: 300px;padding:5px 10px;background:#000;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> <span class="fa fa-plus"></span> </a> </div>
  <div class="caraousel-tooltip-item" data-index="2"> <a href="#" class="tooltip-carousel" style="top:100px;left: 500px;padding:5px 10px;background:#000;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> <span class="fa fa-plus"></span> </a> </div>
  <div class="caraousel-tooltip-item" data-index="3"> <a href="#" class="tooltip-carousel" style="top:20px;left: 300px;padding:5px 10px;background:#000;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> <span class="fa fa-plus"></span> </a> </div>
  <div class="caraousel-tooltip-item" data-index="4"> <a href="#" class="tooltip-carousel" style="top:180px;left: 200px;padding:5px 10px;background:#000;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> <span class="fa fa-plus"></span> </a> </div>
</div>

3. Create the bottom indicators for the image carousel.

<ol class="carousel-indicators">
  <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
  <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  <li data-target="#carousel-example-generic" data-slide-to="4"></li>
</ol>

4. Create the Html for an image carousel.

<div class="carousel-inner">
  <div class="item active"> <img src="1.jpg" alt="..." style="width:100%">
    <div class="carousel-caption">
      <h3>Lorem ipsum dolor</h3>
      Lorem ipsum dolor sit amet, tharsiam eam est in. </div>
  </div>
  <div class="item"> <img src="2.jpg" alt="..." style="width:100%">
    <div class="carousel-caption">
      <h3>Lorem ipsum dolor</h3>
      Lorem ipsum dolor sit amet, tharsiam eam est in. </div>
  </div>
  <div class="item"> <img src="3.jpg" alt="..." style="width:100%">
    <div class="carousel-caption">
      <h3>Lorem ipsum dolor</h3>
      Lorem ipsum dolor sit amet, tharsiam eam est in. </div>
  </div>
  <div class="item"> <img src="4.jpg" alt="..." style="width:100%">
    <div class="carousel-caption">
      <h3>Lorem ipsum dolor</h3>
      Lorem ipsum dolor sit amet, tharsiam eam est in. </div>
  </div>
  <div class="item"> <img src="5.jpg" alt="..." style="width:100%">
    <div class="carousel-caption">
      <h3>Lorem ipsum dolor</h3>
      Lorem ipsum dolor sit amet, tharsiam eam est in. </div>
  </div>
</div>

5. Create the next/prev controls for the image carousel.

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

6. The required CSS styles for the tooltip carousel.

.tooltip-carousel {
  position: absolute;
  z-index: 11;
  border-radius: 50%;
}

.caraousel-tooltip-item { display: none; }

.caraousel-tooltip-item.active { display: block; }

7. Include the jQuery library and Bootstrap's javascript in the page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

8. The Javascript to enable the image carousel.

$(function(){
$('.tooltip-carousel').popover();

$('#carousel-example-generic').on('slide.bs.carousel', function () {
$('.tooltip-carousel').popover('hide');
$(this).find('.caraousel-tooltip-item.active').fadeOut(function(){
$(this).removeClass('active');
});
});

$('#carousel-example-generic').on('slid.bs.carousel', function () {
var index = $(this).find('.carousel-inner > .item.active').index();
$(this).find('.caraousel-tooltip-item').eq(index).fadeIn(function(){
$(this).addClass('active');
});
//alert(index);
});

	$('.tooltip-carousel').mouseenter(function(){
$(this).popover('show');
}).mouseleave(function(){
$(this).popover('hide');
});
});

---

This awesome jQuery plugin is developed by inital_a. For more Advanced Usages, please check the demo page or visit the official website.