показать следующий товар название предыдущий следующий hover carousel

Question

Я использую twitter bootstarp carousel на своей веб-странице. Мне нужно показать заголовок следующего элемента мыши над следующей стрелкой.

Html:

<div id="carousel-example-generic" class="carousel slide homecarousel" data-ride="carousel"> 
<!-- FIRST for slide --> 
<div class="carousel-inner"> 
<div class="item active" title="Adult"> 
slider 1 
</div> 
<div class="item" title="Baby"> 
slider 2 
</div> 
<div class="item" title="Ingredients"> 
slider 3 
</div> 
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev" ><img src="images/arrow_left.png" alt=""></a> 
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next" ><img src="images/arrow_right.png" alt=""></a> 

</div> 
</div> 

Как этого добиться? Любая помощь будет оценена по достоинству. Благодарю.

Answer 1

Что-то вроде этого? :

$('.carousel-control').on('mouseover', function() { 
    var titles = $('.carousel-inner .item').map(function(){ return this.title; }); 
    var currentIndex = $('.carousel .active').prevAll('.item').length; 
    var title = titles[currentIndex + 1 > titles.length -1 ? 0 : currentIndex + 1]; 
    if ($(this).hasClass('left')) { 
     title = titles[currentIndex - 1 < 0 ? titles.length - 1 : currentIndex - 1]; 
    } 
    $(this).attr('title', title); 
}); 

Fiddle