CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Peter Viglietta
Peter Viglietta

Reputation: 31

Adding Bootstrap carousel component

Very simple question about adding the Bootstrap carousel component... I am using the code below to add a simple picture/carousel section to my website. Here is the page from Bootstrap where I got it. When I open this, it just loads all the images statically on the page as if I just added them normally.

    <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img class="d-block img-fluid" src="img/hotyellowpinkpop.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="img/pinkyellowater.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="img/purpleyellowmoons.jpg" alt="Third slide">
    </div>
  </div>
</div>

I have bootstrap js files present and linked in the of the html document. What am I missing? Thanks

Upvotes: 2

Views: 404

Answers (2)

Owen Glen
Owen Glen

Reputation: 66

Here's a couple of things you need to check for:

  • Is bootstrap fully loaded?
    • .js and .css files
  • Have you initilized the corousel?
    • here's the jQuery for initializing: $('.carousel').carousel()

If you've done those things, let us know and maybe give us a link to the page you're having trouble with, or reproduce it for us on CodePen or JSFiddle or the like.

Upvotes: 2

Michael Coker
Michael Coker

Reputation: 53664

You're using .carousel-item where it should be .item. You can see an example here https://getbootstrap.com/examples/carousel/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img class="d-block img-fluid" src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="First slide">
    </div>
    <div class="item">
      <img class="d-block img-fluid" src="http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg" alt="Second slide">
    </div>
    <div class="item">
      <img class="d-block img-fluid" src="https://futurism.com/wp-content/uploads/2015/11/neildegrassetyson.jpg" alt="Third slide">
    </div>
  </div>
</div>

Upvotes: 2

Related Questions