Kotise Kotise - 2 months ago 11
HTML Question

Bootstrap Carousel Wont Start Cycle Automaticly

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>

Answer

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

Comments