CODEWITHSUNDEEP
htmltwitter-bootstrap
bloodless2010
bloodless2010

Reputation: 349

Bootstrap carousel dissapearing after last slide

Okay so, this is happening recently, I'm not quite sure why. So I am using bootstrap carousel, and this is the best way to explain it: There is 2 slides, and the user is on the second slide, if they click the > glyphicon to go to the next slide, the whole carousel disappears (because there isn't a slide) how can I fix this? Here is my current markup:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <div style="margin-left: 2em" class="carousel-indicators">
    &nbsp;&nbsp;
  </div>
  <div class="carousel-inner">
    <div class='item active'>
      <img src='' alt='Updates + Helper rank' />
      <div class='container'>
        <div class='carousel-caption'>
          <h1>
            Updates + Helper rank
          </h1>
          <p>
            text here
          </p>
        </div>
      </div>
    </div>
    <div class='item'>
      <img src='' alt='Website Updates &amp; News Prune' />
      <div class='container'>
        <div class='carousel-caption'>
          <h1>
            Website Updates &amp; News Prune
          </h1>
          <p>
            text here
          </p>
        </div>
      </div>
    </div><a class="left carousel-control" href="#myCarousel" data-slide="prev"></a> <a class="right carousel-control" href= "#myCarousel" data-slide="next"></a>
  </div>
</div>

Thanks!

Edit: Also wondering if anyone knows how I can stop it sliding automatically?

Upvotes: 2

Views: 3291

Answers (2)

omma2289
omma2289

Reputation: 54629

The issue is that you have the carousel controls inside your .carousel-inner container when they should be outside. Also there's no need to use .container elements inside captions. Finally, to avoid the carousel from cycling automatically you can set the data-interval attribute to "false".

Here's how the revised markup should look like:

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
    <!-- Indicators -->
    <div style="margin-left: 2em" class="carousel-indicators">&nbsp;&nbsp;</div>
    <div class="carousel-inner">
        <div class='item active'>
            <img src='http://placehold.it/500x300' alt='Updates + Helper rank' />
            <div class='carousel-caption'>
                 <h1>
            Updates + Helper rank
          </h1>

                <p>text here</p>
            </div>
        </div>
        <div class='item'>
            <img src='http://placehold.it/500x300' alt='Website Updates &amp; News Prune' />
            <div class='carousel-caption'>
                 <h1>Website Updates &amp; News Prune</h1>
                <p>text here</p>
            </div>
        </div>
    </div>
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"></a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next"></a>
</div>

And here's a working demo

Upvotes: 2

Bob Jansen
Bob Jansen

Reputation: 89

I can't exactly pin point where it goes wrong, but I it most likely because of bad HTML markup. I would recommened rebuilding it from scratch to see if you can fix it. You can get a full code example of the Bootstrap courasoul here. Try plugging in the exmaple code first, to narrow the problem either down to your HTML code or something else.

You can stop the automatic sliding by setting inverval to false:

$('.carousel').carousel({
  interval: false
})

Upvotes: 0

Related Questions