0

Firstly this is not duplicate of any post I have bootstrap carousel and I'm trying to set interval for my each bootstrap carousel .item and I found a code for it from here but this example is not work on my snippet where is my mistake ? my code is same as with this carousel but nothing happening how can I set interval for my each bootstrap carousel item ?

At the moment this only work per carousel and I think it should work per slide (overwrite default) for 2 reasons:

First slide can be set to show a quick overview, etc Some slides may have more text and require a longer delay to read, some have less....

E.g

<div class="carousel-inner">
    <div class="active item" data-interval="500">…</div>
    <div class="item" data-interval="5000">…</div>
    <div class="item" data-interval="5000>…</div>
</div>

And my real example

$(window).load(function() {
  var t;

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

  $('#carousel').on('slid.bs.carousel', function() {
    clearTimeout(t);
    var duration = $(this).find('.active').attr('data-interval');

    $('#carousel').carousel('pause');
    t = setTimeout("$('#carousel').carousel();", duration - 1000);
  })
  $('.ani-icon-right-chevron').on('click', function() {
    clearTimeout(t);
  });

  $('.ani-icon-chevron-pointing-to-the-left').on('click', function() {
    clearTimeout(t);
  });

});
#carousel {
  width: 700px;
  margin: 70px auto;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />



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

  <div class="carousel-inner">
    <div class="item active" data-interval="300">
      <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-interval="600">
      <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-interval="900">
      <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" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel" 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>
Community
  • 1
  • 1
ani_css
  • 2,118
  • 3
  • 30
  • 73

3 Answers3

2

edited your code and so far its working on my end

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



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

    <div class="carousel-inner">
        <div class="item active" interval="1000">
            <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" interval="10000">
            <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" interval="5000">
            <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" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel" 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>

<script>
    $(window).load(function () {
        var st;

        $('#carousel').on('slid.bs.carousel', function () {
         //   debugger;

            var newinterval = $('#carousel .carousel-inner').find('.active').attr('interval');

            $('#carousel').carousel("pause");
            clearTimeout(st);
           st =  setTimeout("$('#carousel').carousel()", newinterval);

           // $('#carousel').carousel({ interval: newinterval });
        });
    });
</script>
mhars
  • 148
  • 6
  • no I'm trying to setinterval for each item for e At the moment this only work per carousel and I think it should work per slide (overwrite default) for 2 reasons: First slide can be set to show a quick overview, etc Some slides may have more text and require a longer delay to read, some have less.... E.g
    …
    …
     – ani_css Apr 18 '17 at 07:02
  • OO great so how can we make it second instead of milisecond? – ani_css Apr 18 '17 at 08:29
  • 1
    you just need to adjust the interval attribute of each item 1000 = 1 second – mhars Apr 18 '17 at 08:53
0

Try adding data-interval="value" to <div id="carousel" class="carousel slide" data-ride="carousel">

Norbert
  • 76
  • 5
0

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



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

    <div class="carousel-inner">
        <div class="item active">
            <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">
            <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">
            <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" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>
d8mart
  • 1
  • 1