I know that this question has been asked earlier, however the solution there did not work for me.

My code:

<div id="gallerycontainer">
<div class="carousel-inner" align="center" style="margin-top:10px;">

<div class="item active" style="border:5px solid black;"><!-- class of active since it's the first item -->
  <img src="bootstrap/img/slider5.jpg" height="400px"  alt="" />
  <div class="carousel-caption">
    <p>Caption text here</p>
  </div>
</div>
<div class="item" style="border:5px solid black;">
  <img src="" alt="" />
  <div class="carousel-caption">
    <p>Caption text here</p>
  </div>
</div>
<div class="item" style="border:5px solid black;">
  <img src="bootstrap/img/slider3.jpg" height="400px" width="960px" alt="" />
  <div class="carousel-caption">
    <p>Caption text here</p>
  </div>
</div>
<div class="item" style="border:5px solid black;">
  <img src="bootstrap/img/slider4.jpg" height="400px" width="960px" alt="" />
  <div class="carousel-caption">
    <p>Our bedrooms are spacious and extremely luxurious.</p>
  </div>
</div>

`

gallerycontainer is a self created div within which my carousel is placed.

I've called the function in the head by using this:

<script type="text/javascript">
$(document).ready(function(){
$('.carousel').carousel({interval: 2000});
});
</script>

My problem is, the auto slide starts only after I click the next button at least once. What am I doing wrong?

I know that this question has been asked earlier, however the solution there did not work for me.

My code:

<div id="gallerycontainer">
<div class="carousel-inner" align="center" style="margin-top:10px;">

<div class="item active" style="border:5px solid black;"><!-- class of active since it's the first item -->
  <img src="bootstrap/img/slider5.jpg" height="400px"  alt="" />
  <div class="carousel-caption">
    <p>Caption text here</p>
  </div>
</div>
<div class="item" style="border:5px solid black;">
  <img src="http://placehold.it/1200x480" alt="" />
  <div class="carousel-caption">
    <p>Caption text here</p>
  </div>
</div>
<div class="item" style="border:5px solid black;">
  <img src="bootstrap/img/slider3.jpg" height="400px" width="960px" alt="" />
  <div class="carousel-caption">
    <p>Caption text here</p>
  </div>
</div>
<div class="item" style="border:5px solid black;">
  <img src="bootstrap/img/slider4.jpg" height="400px" width="960px" alt="" />
  <div class="carousel-caption">
    <p>Our bedrooms are spacious and extremely luxurious.</p>
  </div>
</div>

`

gallerycontainer is a self created div within which my carousel is placed.

I've called the function in the head by using this:

<script type="text/javascript">
$(document).ready(function(){
$('.carousel').carousel({interval: 2000});
});
</script>

My problem is, the auto slide starts only after I click the next button at least once. What am I doing wrong?

• javascript
• jquery
• twitter-bootstrap

• What happens when you remove the interval? – usha Commented Aug 21, 2013 at 13:45
• 1 I've had the same problem. Solved it by calling the carousel() function again as such: $('.carousel').carousel({interval: 2000}).carousel() – kayen Commented Aug 21, 2013 at 13:45
• Vimsha, when I remove the interval, it doesnt start. Kayen, I'm going to try your method in a sec. Will post if it works – Newtt Commented Aug 21, 2013 at 13:50

6 Answers 6

Bootstrap V3 Carousel Will start sliding carousel on page load (R-L)......

<script>
$(function(){
$('#myCarousel').carousel({interval: 3000});
});
</script>

To change how long between slides and loading change the interval number ;)

Also Place in the head of the doc.....

No jQuery needed.
Just add data-ride="carousel" to the appropriate carousel div container.

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

Try to give your Carousel an id

and try this

 $('#myCarousel').carousel({                // For Carousel Image Slider
    interval: 6000,
    cycle: true,
 }).trigger('slid');

myCarousel = id of carousel

<script type="text/javascript">
$(document).ready(function(){
$('.carousel-inner').carousel({interval: 2000});
});
</script>

This usually happens as the default behavior for the carousel is to pause on mouse hover.

To override it, you can use the attribute data-pause="false" when declaring your carousel, for example:

<div id="carouselExample" class="carousel slide carousel-fade" data-pause="false">

Try to put the JavaScript file before end of the page not on section.

Ref: http://twitterbootstrap/twitter-bootstrap-3-carousel-not-automatically-starting/

thanks