CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap-3carousel
Brian Hankins
Brian Hankins

Reputation: 35

Bootstrap 3 carousel wont display correctly, or change images

I can't seem to get the Bootstrap 3 carousel to turn images. None of it seems to work. This was originally done in CodePen but moved it all over to a text editor. I've looked all over for answers...

Here is the result...any ideas? 

<!DOCTYPE html>

<body>


  <div id="carousel-home" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carousel-home" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-home" data-slide-to="1"></li>
      <li data-target="#carousel-home" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="img/flower-21.jpg">
        <div class="carousel-caption">
          <h3>Flower 1</h3>
        </div>
      </div>
      <div class="item">
        <img src="img/flower12.jpg">
        <div class="carousel-caption">
          <h3>Flower 2</h3>
        </div>
      </div>
      <div class="item">
        <img src="img/flowers3.jpg">
        <div class="carousel-caption">
          <h3>Flower 3</h3>
        </div>
      </div>
    </div>
    <a class="left carousel-control" href="#carousel-home" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-home" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</body>

JSFiddle

Upvotes: 0

Views: 402

Answers (2)

Manh Le
Manh Le

Reputation: 1650

As your provided JSFiddle, you are missing bootstrap Javascript library (bootstrap.js)

A tip when use bootstrap document, if you see anything in Javascript tab, it need bootstrap.js!

Upvotes: 1

zgood
zgood

Reputation: 12571

Make sure you include the bootstrap.min.js and jquery libraries for the carousel to work.

See this fiddle (expand the External Resources tab)

The Bootstrap carousel doc is here

Upvotes: 1

Related Questions