0

I've been working on my carousel and it seems to be working now.

It start cycling, but not before I've hovored my cursor once over it. How do I make it start cycle automaticly, so people doesn't have to hover the carousel.

Heres my code:

<div id="slider" class="carousel slide">
 <div class="carousel-inner">
  <div class="item active">
   <img src="img/slide1.jpg" id="picture">
   <div class="carousel-caption">
   <center><h4>ADD TEXT LATER</h4>
   <p>ADD TEXT LATER</p></center>
  </div>
 </div>
 <div class="item">
  <img src="img/slide2.jpg" id="picture">
  <div class="carousel-caption">
  <center><h4>ADD TEXT LATER</h4>
  <p>ADD TEXT LATER</p></center>
 </div>
</div>
 <div class="item">
  <img src="img/slide3.png" id="picture">
  <div class="carousel-caption">
  <center><h4>ADD TEXT LATER</h4>
  <p>ADD TEXT LATER</p></center>
 </div>
</div>
  <div class="item">
  <img src="img/slide4.png" id="picture">
  <div class="carousel-caption">
  <center><h4>ADD TEXT LATER</h4>
  <p>ADD TEXT LATER</p></center>
 </div>
</div>
</div>

<a class="carousel-control left"href="#slider" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right"href="#slider" data-slide="next">&rsaquo;</a>
</div>

<script>
$('.carousel').carousel({
  interval: 1000
})
</script>

<script src="js/bootstrap-carousel.jss"></script>
4

4 回答 4

1

Other than adding placeholder images, I took your exact HTML and it seems to work correctly for me @ http://www.bootply.com/66558 .

Perhaps you could double-check everything is good with your CSS and JS files, or alternatively try using CDN versions for troubleshooting

Good luck!

EDIT

If the above still doesn't work for you, try initialising with 

$(document).ready(function () {
$('.carousel').carousel({
    interval: 1000
});

$('.carousel').carousel('cycle');
});

See live: http://www.bootply.com/66559

于 2013-07-06T01:21:33.453 回答
0

It seems to work with the "cycle" but how do I change the interval then? It goes so quickly if I add the cycle.

EDIT

Never mind, I just took the interval from 1000 to 10000, now it seems to work perfectly. THANKS YOU SIR!

于 2013-07-09T14:04:00.007 回答
0

Still havent helped me, nor browsing git hub discussions. Everybody seemed not to see the real problem that the carousel is really pausing when the mouse is on the container....so I had to read through the .carousel docs and its really there... pause atribute have to be set on null or its on default set to "hover" which will pause it ... so for me add this is the resolution:

add the interval, set pause on null, and then manually call the carousel

<script>
  $(document).ready(function () {
$('.carousel').carousel({
    interval: 3100,
    pause:null
});

$('.carousel').carousel('cycle');
});  

</script>
于 2016-09-05T22:08:47.997 回答
0

I had to add delay for carousel starting function. For some reason it did not start after routing to another page view.

This is what did the trick for me:

<script>
setTimeout(function() {
  $('.carousel').carousel();
}, 3000);  
</script>
于 2020-02-16T09:26:33.827 回答