How to delay bootstrap carousel for each item?

Question

I have data-delay attribute for each item and I want to delay my item for example if my first item has data-delay="10" then delay my item 10 second or if my second item attribute is 20 than delay my item 20 second is that possible ?

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />

<div id="carousel-example" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example" data-slide-to="1"></li>
    <li data-target="#carousel-example" data-slide-to="2"></li>
  </ol>

  <div class="carousel-inner">
    <div class="item active" data-delay="10">
      <a href="#"><img src="http://placekitten.com/1600/600" /></a>
      <div class="carousel-caption">
        <h3>Meow</h3>
        <p>Just Kitten Around</p>
      </div>
    </div>
    <div class="item" data-delay="5">
      <a href="#"><img src="http://placekitten.com/1600/600" /></a>
      <div class="carousel-caption">
        <h3>Meow</h3>
        <p>Just Kitten Around</p>
      </div>
    </div>
    <div class="item" data-delay="23">
      <a href="#"><img src="http://placekitten.com/1600/600" /></a>
      <div class="carousel-caption">
        <h3>Meow</h3>
        <p>Just Kitten Around</p>
      </div>
    </div>
  </div>

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

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

all item has a data-delay attribute and according to this value I want to delay my carousel — ani_css, Apr 17 '17 at 12:29
I mean I want to do different slide duration for each item on bootstrap — ani_css, Apr 17 '17 at 12:30
with `data-delay="10"` you mean 10 seconds, right? idk if theres something existing, but isnt hard to make a function for this — TriForce, Apr 17 '17 at 12:50
Possible duplicate of [Different slide duration for each item on bootstrap 3.1 carousel](http://stackoverflow.com/questions/23300199/different-slide-duration-for-each-item-on-bootstrap-3-1-carousel) — Deep 3015, Apr 17 '17 at 13:22

Neil · Accepted Answer · 2017-04-17T12:59:01.727

3

If you change the interval on every slide, you can obtain this functionality.

https://jsfiddle.net/9nkLousp/1/

function slide() {
  $(this).carousel({
    interval: $(this).find(".item.active").data("delay") * 1000
  });
}

slide.bind($('#carousel'))();
$('#carousel').on('slid.bs.carousel', slide)

Additionally, I added a carousel id:

<div id="carousel" class="carousel slide" data-ride="carousel">

edited Apr 17 '17 at 12:59

answered Apr 17 '17 at 12:51

Neil

14,063
3
30
51

thank you so much but I guess this function is not work – ani_css Apr 17 '17 at 12:57
If you try the jsfiddle it works perfectly. Maybe you didn't update your html according to the jsfiddle. – Neil Apr 17 '17 at 12:58
I tried right now but all item are for 10 second I'll try again – ani_css Apr 17 '17 at 13:00
for example you can check it out https://codepen.io/cowardguy/pen/dWoaYV – ani_css Apr 17 '17 at 13:10

How to delay bootstrap carousel for each item?

1 Answers1