Geek Answers Handbook

Twitter carousel slide duration

In the Twitter Bootstrap carousel, how can I make a specific slide for a different duration than others?

I can change the duration of the slider with the "interval" parameter, but I don’t know how to set an individual duration for a particular slide.

+4
source share
4 answers

The Bootstrap 3.1 carousel does not allow a different duration for each slide, but it offers one method and one event that we can use to confirm this.

We will use the slid.bs.carousel event to determine when the carousel has completed the slide transition and the .carousel('pause') parameter to stop the carousel from cycling through objects.

We will use this attribute data-interval="x" for each element of the carousel with a different time duration, so our html will look like this:

 <div class="carousel-inner"> <div class="active item" data-interval="3000"> <img src="Url 1" /> </div> <div class="item" data-interval="6000"> <img src="Url 2" /> </div> <div class="item" data-interval="9000"> <img src="Url 3" /> </div> </div>

Now all we need to do is:

  • detects when a new item is displayed using the slid.bs.carousel event
  • check its duration
  • pause the carousel with .carousel('pause')
  • set a timeout with the duration of the element and after the duration is completed, we must abandon the carousel

The javascript code will look like this:

 var t; var start = $('#myCarousel').find('.active').attr('data-interval'); t = setTimeout("$('#myCarousel').carousel({interval: 1000});", start-1000); $('#myCarousel').on('slid.bs.carousel', function () { clearTimeout(t); var duration = $(this).find('.active').attr('data-interval'); $('#myCarousel').carousel('pause'); t = setTimeout("$('#myCarousel').carousel();", duration-1000); }) $('.carousel-control.right').on('click', function(){ clearTimeout(t); }); $('.carousel-control.left').on('click', function(){ clearTimeout(t); });

As you can see, we are forced to add an initial interval at the beginning, and I set it to 1000 ms, but I delete it every time I pause the duration-1000 carousel. I used the lines below to solve the problem with the first element, because this element was not captured by the slid event .

 var start = $('#myCarousel').find('.active').attr('data-interval'); t = setTimeout("$('#myCarousel').carousel({interval: 1000});", start-1000);

I also noticed that if the user presses the arrows, the timeout goes crazy, so I clear the timeout every time the user presses the left and right arrow.

Here is my live example http://jsfiddle.net/paulalexandru/52KBT/ , hope this answer was useful for you.

+4
source

You need to set the spacing in the main div as the data spacing tag. This way it works great and you can give different times for different slides.

 <!--main div --> <div data-ride="carousel" class="carousel slide" data-interval="100" id="carousel-example-generic"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class=""></li> </ol> <!-- Wrapper for slides --> <div role="listbox" class="carousel-inner"> <div class="item"> <a class="carousel-image" href="#"> <img alt="image" src="image.jpg"> </a> </div> </div> </div>
0
source

I could not get carousel('pause') to work at all inside bootstrap event handlers. I'm not sure why - perhaps this is due to the dynamic rendering of slides with KnockoutJS or possibly a bug in Bootstrap (I assume this is my code).

So, to set the slide interval individually, friends in the carousel, I used the slid.bs.carousel event that pops up in Bootstrap and using setTimeout to set the interval based on the item data-interval attribute and manually calling the carousel('next') method carousel('next') .

Js

 // slide event $('.carousel').on('slid.bs.carousel', function () { var carouselData = $(this).data('bs.carousel'); var currentIndex = carouselData.getActiveIndex(); window.setTimeout(function() { $('.carousel').carousel('next'); }, $(carouselData.$items[currentIndex]).data('interval')); }); // init carousel $('.carousel').carousel({ interval: false }); // set initial timeout for active slide data-interval window.setTimeout(function () { $('.carousel').carousel('next'); }, $('.carousel .active').data('interval'));

HTML

 <div class="carousel"> <div class="carousel-inner"> <div id="slide1" class="item active" data-interval="5000">{{content}}</div> <div id="slide2" class="item" data-interval="10000">{{content}}</div> <div id="slide3" class="item" data-interval="10000">{{content}}</div> </div> </div>

In this example, #slide1 will be the initial slide in your carousel and show for 5 seconds. After 5 seconds, it will move to #slide2 .

#slide2 will stop for 10 seconds before moving to #slide3 . And so on. And so on...

-1
source

If you still haven't found a solution, I modified Bootstrap carousel.js to add this functionality.

  • Add an optional attribute ( data interval ) to the element of the item class.

    <div class="active item" data-interval="6000">

  • Edit carousel.js

    • Add flag to define first loop

        var Carousel = function (element, options) {
 this. $ element = $ (element)
 this. $ indicators = this. $ element.find ('. carousel-indicators')
 this.options = options
 this.paused =
 this.sliding =
 this.interval =
 this. $ active =
 this. $ items = null
 // [TODO Kevin] Added - BEGIN
 this.isFirstCycle = true
 // [TODO Kevin] Added - BEGIN

 this.options.pause == 'hover' && this. $ element
 .on ('mouseenter', $ .proxy (this.pause, this))
 .on ('mouseleave', $ .proxy (this.cycle, this))
 }

    • Change the function of CYCLE

        Carousel.prototype.cycle = function (e) { e || (this.paused = false) this.interval && clearInterval(this.interval) //[TODO Kevin] Modified - BEGIN //this.options.interval && !this.paused && (this.interval = setInterval($.proxy(this.next, this), this.options.interval)) if (this.options.interval && !this.paused) { var $active = this.$element.find('.item.active'); /**CUSTOM ITEM INTERVAL**/ if ($active.data('interval')) { var customInterval; /*On First Cycle*/ if(this.isFirstCycle) { //Get ACTIVE ITEM interval customInterval = $active.data('interval'); this.isFirstCycle = false; /*On Suceeding Cycles*/ } else { //Get NEXT ITEM interval var $next = $active['next'](); if (!$next.length) { if (!this.options.wrap) return this $next = this.$element.find('.item')['first']() } customInterval = $next.data('interval'); } this.interval = setInterval($.proxy(this.next, this), customInterval); /**DEFAULT INTERVAL**/ } else { this.interval = setInterval($.proxy(this.next, this), this.options.interval); } } //[TODO Kevin] Modified - END return this }

Example: JS Fiddle

-2
source

More articles:


All Articles