Carousel wont slide


My carousel wont slid to the next image. I also tried to make the image into a clickable link and that didnt work either.

https://www.w3schools.com/howto/howto_js_slideshow.asp

https://www.w3schools.com/bootstrap/bootstrap_carousel.asp

https://www.w3schools.com/w3css/w3css_slideshow.asp

Ye, I’ve created the bootstrap carousel but it wont slide. it only shows item 0. items 1,2,3 wont come up

check out this example from w3s and compare it to your code, look at the differences, see anything???

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.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>
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
  </style>
</head>
<body>

<div class="container">
  <br>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

      <div class="item active">
        <img src="img_chania.jpg" alt="Chania" width="460" height="345">
        <div class="carousel-caption">
          <h3>Chania</h3>
          <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
        </div>
      </div>

      <div class="item">
        <img src="img_chania2.jpg" alt="Chania" width="460" height="345">
        <div class="carousel-caption">
          <h3>Chania</h3>
          <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
        </div>
      </div>
    
      <div class="item">
        <img src="img_flower.jpg" alt="Flower" width="460" height="345">
        <div class="carousel-caption">
          <h3>Flowers</h3>
          <p>Beatiful flowers in Kolymbari, Crete.</p>
        </div>
      </div>

      <div class="item">
        <img src="img_flower2.jpg" alt="Flower" width="460" height="345">
        <div class="carousel-caption">
          <h3>Flowers</h3>
          <p>Beatiful flowers in Kolymbari, Crete.</p>
        </div>
      </div>
  
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" 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="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

</body>

even if i copy and paste that into my html it wont work.

make sure you swap out the js src="img_chania.jpg" in each of the items by replacing with your image url

ye I did . I figure i may have the wrong version of bootstrap or something. Ive gone with a grid system instead

here’s exactly what your carousel code should look like … see all the comment tags I inserted -

  <!-- This isn't necessary in CodePen, remove -->
<head>
  <title>Bootstrap Carousel Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  <!-- This goes in the css settings, just use the url in settings -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  
  
  <!-- These go in the js settings, just use the url in settings -->
  <script src="https://ajax.googleapis.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>
  
  <!-- This goes in the css box, remove <style> tags -->
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
  </style>
  
  <!-- These aren't necessary for this project, okay to remove -->  
</head>
<body>
  
  
  <!-- This goes in the html box -->
<div class="container">
  <br>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

      <div class="item active">
        <img src="your image url" alt="image 1" width="460" height="345">
        <div class="carousel-caption">
          <h3>Image 1</h3>
          <p>Image description 1.</p>
        </div>
      </div>

      <div class="item">
        <img src="your image url" alt="image 2" width="460" height="345">
        <div class="carousel-caption">
          <h3>Image 2</h3>
          <p>Image description 2.</p>
        </div>
      </div>
    
      <div class="item">
        <img src="your image url" alt="image 3" width="460" height="345">
        <div class="carousel-caption">
          <h3>Image 3</h3>
          <p>Image description 3.</p>
        </div>
      </div>

      <div class="item">
        <img src="your image url" alt="image 4" width="460" height="345">
        <div class="carousel-caption">
          <h3>Image 4</h3>
          <p>Image description 4.</p>
        </div>
      </div>
  
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" 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="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

 <!-- This can be removed -->
</body>

Ive already got bootstrap in the background. But I think I can see the problem, co I didnt have JQuery. Thanks

I had a major issue with this when creating my tribute page. It turned out the code I found in the documentation had the class for each of the pictures with class=“carousel-item” and I spent a lot of time browsing forums until I finally noticed that everyone else’s code only had class=“item” for their pictures. Everything instantly started working for me then. Hope this helps in a future project.