Boopstrap Carousel with different intervals for each slide
Hello I am making a banner with the carousel that comes in boopstrap, the requirements indicate that each slide must last a certain time and that when you hover the mouse over one of the slides it must pause.
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>
And this is my Javascript, I've tried everything to pause it and I know it seems like a simple task but I couldn't appreciate any help
$('#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);
})
2 answers
I understood from the comments that you want different intervals for each slide. I don't see a native way but I suggest this to you:
Modifies the functions cycle and pause of the carousel component. That's where setInterval and clearInterval are called. The problem is that setInterval works at regular intervals, so you have to change its logic to make it work with setTimeout.
This implementation, takes the exposure time of each slide from a new property that adds Call data-duration where you indicate the duration of the slide.
Here's a complete example: https://jsfiddle.net/rnrlabs/70k5jL11 /
HTML example:
<!-- Items -->
<div class="carousel-inner">
<div class="item active" data-duration="1500">
</div>
<div class="item" data-duration="3000">
</div>
<div class="item" data-duration="8000">
</div>
</div>
JavaScript:
var extension = {
cycle: function (e, extra) {
e || (this.paused = false)
this.interval && clearTimeout(this.interval)
var nextInterval;
var $active = this.$element.find('.item.active')
if (!extra) {
nextInterval = $active.data("duration") || this.options.interval;
} else {
var $next = this.getItemForDirection('next', $active)
nextInterval = $next.data("duration") || this.options.interval;
}
!this.paused
&& (this.interval = setTimeout($.proxy(this.nextProxy, this), nextInterval))
return this
},
pause: function (e) {
e || (this.paused = true)
if (this.$element.find('.next, .prev').length && $.support.transition) {
this.$element.trigger($.support.transition.end)
this.cycle(true)
}
this.interval = clearTimeout(this.interval)
return this
},
nextProxy: function() {
this.next()
this.cycle(true, true)
}
}
// con esto extendemos el componente carousel
$.extend($[ "fn" ][ "carousel" ][ "Constructor" ].prototype, extension);
$(function() {
$('#carousel-publicidad').carousel();
});
As for the pause when you hover over the carousel, this is the default behavior. This property pause which with value 'hover' works as you want, but as I said is the default value.
$(function() {
$('#carousel-publicidad').carousel({ pause: 'hover' });
});
Two things to keep in mind:
This solution is sensitive to any update in
bootstrap.js, if you use it, before making an update, test its operation well.You Cannot use it with the minified version (bootstrap.minute.js) since it invokes methods that change names in that version.
I leave you this example, I think it is basically what you are looking for, I hope it serves you.
Apparently inside stack overflow the code snippet doesn't run very well, but you can run it in jsfiddle here .
// invoka el carousel
$('#myCarousel').carousel({
interval: 3000
});
/* SLIDE ON CLICK */
$('.carousel-linked-nav > li > a').click(function() {
// Toma href, remueve el signo #, convierte a numero
var item = Number($(this).attr('href').substring(1));
// slide al numbero -1 (cuenta para indexado en cero)
$('#myCarousel').carousel(item - 1);
// remueve la clase active
$('.carousel-linked-nav .active').removeClass('active');
// agrega a clase active al item que se le dio click
$(this).parent().addClass('active');
// no sigue el link
return false;
});
/* AUTOPLAY NAV HIGHLIGHT */
// atacha la funcion 'slid'
$('#myCarousel').bind('slid', function() {
// remueve clase active
$('.carousel-linked-nav .active').removeClass('active');
// obtiene el indice del elemento activo
var idx = $('#myCarousel .item.active').index();
// selecciona el elemento activo y le agrega la clase active
$('.carousel-linked-nav li:eq(' + idx + ')').addClass('active');
});@import url('//netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css');
#myCarousel {
margin-top: 40px;
}
.carousel-linked-nav,
.item img {
display: block;
margin: 0 auto;
}
.carousel-linked-nav {
width: 120px;
margin-bottom: 20px;
}<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="http://placehold.it/300x200/888&text=Item 1" />
</div>
<div class="item">
<img src="http://placehold.it/300x200/aaa&text=Item 2" />
</div>
<div class="item">
<img src="http://placehold.it/300x200/444&text=Item 3" />
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
<!-- LINKED NAV -->
<ol class="carousel-linked-nav pagination">
<li class="active"><a href="#1">1</a></li>
<li><a href="#2">2</a></li>
<li><a href="#3">3</a></li>
</ol>