Controls for bootstrap 3 carousel are not working

Question

I'm trying to create an image carousel with bootstrap 3. The images will slide on their own after a set amount of time, but I cannot get the controls to slide the images. It seems like I'm following the docs exactly. I've included the HTML as well as a jsfiddle:

http://jsfiddle.net/L03rcutv/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  <body>
   <nav class="navbar navbar-default navbar-fixed-top"><a class="navbar-brand">Test</a></nav>
<div class="container">
  <div class="row">
    <div style="height:100px;" class="col-md-12"></div>
  </div>
</div>
<div style="border-right:1px solid #E7E7E7;" class="container listingContainer">
  <div style="border-top:1px solid #E7E7E7;border-bottom:1px solid #E7E7E7;" class="row">
    <div class="col-md-5 leftAdjust">
      <div id="myCarousel" data-ride="carousel" class="carousel-slide">
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
        </ol>
        <div role="listbox" class="carousel-inner">
          <div class="item active"><img src="http://www.nationalparks.nsw.gov.au/~/media/NPWS/Images/Parks/Yuraygir-National-Park/Background/pebbly-beach-camp.ashx" style="width:100%;height:327px"></div>
          <div class="item"><img src="http://static.hdw.eweb4.com/media/thumbs/1/111/1101776.jpg" style="width:100%;height:327px"></div>
        </div><a href="#myCarousel" role="button" data-slide="prev" class="carousel-control left"><span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span></a><a href="#myCarousel" role="button" data-slide="next" class="carousel-control right"><span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span></a>
      </div>
    </div>
  </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="/javascripts/main.js"></script>

Answer 1

You have a typo.

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

Should be:

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

You have a hyphen between carousel and slide in the class.

FIDDLE

Controls for bootstrap 3 carousel are not working

Question

1 answers

solution1
0 ACCPTED 2014-11-26 18:29:06

Controls for bootstrap 3 carousel are not working

Question

1 answers

solution1 0 ACCPTED 2014-11-26 18:29:06

solution1
0 ACCPTED 2014-11-26 18:29:06