the carousel shows me the first image that's it , it is like the slider is bloked, the buttons not working either

<main>
  <div id="slider"  data-mdb-ride="carousel">
    <div  >
      <div >
        <img src="images/hero1.png"  alt="Wild Landscape">
      </div>
      <div >
        <img src="images/hero2.jpg"  alt="Camera">
      </div>
      <div >
        <img src="images/hero3.jpg"  alt="Exotic Fruits">
      </div>
    </div>
    <button  type="button" data-mdb-target="#slider" data-mdb-slide="prev">
      <span  aria-hidden="true"></span>
      <span >Previous</span>
    </button>
    <button  type="button" data-mdb-target="#slider" data-mdb-slide="next">
      <span  aria-hidden="true"></span>
      <span >Next</span>
    </button>
  </div>
</main>


    
<script src="js/bootstrap.min.js"></script>

CodePudding user response：

Attention to the bootstrap version used. In version 5.2 for example you need to use as:

data-bs-ride
data-bs-target
data-bs-slide

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<main>
      <div id="slider"  data-bs-ride="carousel">
        <div  >
          <div >
            <img src="images/hero1.png"  alt="Wild Landscape">
          </div>
          <div >
            <img src="images/hero2.jpg"  alt="Camera">
          </div>
          <div >
            <img src="images/hero3.jpg"  alt="Exotic Fruits">
          </div>
        </div>
        <button  type="button" data-bs-target="#slider" data-bs-slide="prev">
          <span  aria-hidden="true"></span>
          <span >Previous</span>
        </button>
        <button  type="button" data-bs-target="#slider" data-bs-slide="next">
          <span  aria-hidden="true"></span>
          <span >Next</span>
        </button>
      </div>
</main>

Hope this helps.