Why is my image not showing in my carousel?-CodePudding

so this is my code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

</head>
<body>
    
 
   <main class="container">
    

 
    
  
   

      
    

    




<link rel="stylesheet" href="/css/starRating.css">
<div class="row">

  <div class="col-6 ">

    <!-- this is the carousel part of the code -->
        
    <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner">
        

        <div class="carousel-item ">
          <img src="https://res.cloudinary.com/damhrlza3/image/upload/v1633800172/yelpcamp/pvor5gkvw0myrneq0rot.png "  alt="yelpcamp/pvor5gkvw0myrneq0rot ">
        </div>
      
      

        <div class="carousel-item ">
          <img src="https://res.cloudinary.com/damhrlza3/image/upload/v1633800173/yelpcamp/ykqrdngzexb7nqn5dbg1.jpg "  alt="yelpcamp/ykqrdngzexb7nqn5dbg1 ">
        </div>
      
      

        <div class="carousel-item ">
          <img src="https://res.cloudinary.com/damhrlza3/image/upload/v1633800173/yelpcamp/lr4ng21ocdqtyq2vqfxt.jpg "  alt="yelpcamp/lr4ng21ocdqtyq2vqfxt ">
        </div>
      
      
    </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
 <!-- this is the carousel part of the code -->
    
                
</div>



    
</main>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
    <script src="/js/formvalidation.js"></script>
</body>
</html>

I get everything as I expected, except the image I can get a responsive nav bar when I included the code for it, I have the right image url and it goes to the image if I clicked, but don't know why it is not showing, I did as as it was mentioned in the bootstrap carousel page, both the bootstrap link and the documentation are of same version

CodePudding user response：

You need to provide active class to first carousel-item.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<main class="container">
  <link rel="stylesheet" href="/css/starRating.css">
  <div class="row">
    <div class="col-6 ">
      <!-- this is the carousel part of the code -->
      <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://res.cloudinary.com/damhrlza3/image/upload/v1633800172/yelpcamp/pvor5gkvw0myrneq0rot.png " alt="yelpcamp/pvor5gkvw0myrneq0rot ">
          </div>
          <div class="carousel-item ">
            <img src="https://res.cloudinary.com/damhrlza3/image/upload/v1633800173/yelpcamp/ykqrdngzexb7nqn5dbg1.jpg " alt="yelpcamp/ykqrdngzexb7nqn5dbg1 ">
          </div>
          <div class="carousel-item ">
            <img src="https://res.cloudinary.com/damhrlza3/image/upload/v1633800173/yelpcamp/lr4ng21ocdqtyq2vqfxt.jpg " alt="yelpcamp/lr4ng21ocdqtyq2vqfxt ">
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
      </div>
      <!-- this is the carousel part of the code -->
    </div>
</main>