Boostrap-5 carousel is not working as it should be-CodePudding

I'm learning to build websites, and I'm been doing it by myself with tutorials and stuff. I'm in the part of learning to use bootstrap, but when I try to use the carousel it doesn't work, the slide get stocked in the first picture and no matter how much I wait or how much I push any of the bottons, it does not work.

This is the code from the site, I got the link in my code but it does not work, while others elements from the site, work perfectly:

    <div id="carouselExampleControls"  data-bs-ride="carousel">
  <div >
    <div >
      <img src="..."  alt="...">
    </div>
    <div >
      <img src="..."  alt="...">
    </div>
    <div >
      <img src="..."  alt="...">
    </div>
  </div>
  <button  type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span  aria-hidden="true"></span>
    <span >Previous</span>
  </button>
  <button  type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span  aria-hidden="true"></span>
    <span >Next</span>
  </button>
</div>

CodePudding user response：

You should add bootstrap.min.css and bootstrap.bundle.min.js CDN references to the project

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    
    <!-- Add the following CDN reference -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  </head>
  <body>
  
    <div id="carouselExampleControls"  data-bs-ride="carousel">
      <div >
        <div >
          <img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg"  alt="...">
        </div>
        <div >
          <img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg"  alt="...">
        </div>
        <div >
          <img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg"  alt="...">
        </div>
      </div>

      <button  type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
        <span  aria-hidden="true"></span>
        <span >Previous</span>
      </button>
      <button  type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
        <span  aria-hidden="true"></span>
        <span >Next</span>
      </button>
    </div>

    <!-- Add the following CDN reference -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
  </body>
</html>

References