Hola que tal estoy haciendo un banner con el carousel que viene en boopstrap, los requerimientos indican que cada slide debe durar un tiempo determinado y que cuando pose el mouse sobre uno de los slides este debe pausar.
HTML:
<div id="carousel-publicidad" class="carousel slide" data-ride="carousel1" >
<ol class="carousel-indicators">
<li data-target="#carousel-publicidad" data-slide-to="0" class="active" data-interval="6000" ></li>
<li data-target="#carousel-publicidad" data-slide-to="1" data-interval="3000" ></li>
<li data-target="#carousel-publicidad" data-slide-to="2" data-interval="9000"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active d1d"> <!--se llama a la clase active -->
<div clas="carousel-caption"><h4>Banner1</h4></div>
</div>
<div class="item d2d">
<div clas="carousel-caption"><h4>Banner2</h4></div>
</div>
<div class="item d3d">
<div clas="carousel-caption"><h4>Banner3</h4></div>
</div>
</div>
</div>
Y este es mi Javascript, he tratado de todo para que pause y se que parece una tarea sencilla pero no he podido agradecería cualquier ayuda
$('#carousel-publicidad').carousel({interval: 6000});
$('#carousel-publicidad').on('slid.bs.carousel', function () {
var duration = $(this).find('.active').attr('data-interval');
$('#carousel-publicidad').carousel('pause');
setTimeout("$('#carousel-publicidad').carousel();", duration-1000);
})