'Js script not working properly in Bootstrap 5

I'm trying to make a carousel using Bootstrap 5, but it seems my js script is not working properly since my carousel does not slide or fade (it just change the image). What am i missing?

I've tried to put the script on the header and also tried to use popper and js scripts separately but with no success

Thanks in advance.

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>test</title>

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    
  </head>
  <body>
    <section id="features">
      <div class="container-fluid">
        <div id="carouselGames" class="carousel slide carousel-dark" data-bs-ride="carousel">
          <div class="carousel-indicators">
            <https://stackoverflow.com/questions/70899896/js-script-not-working-properly-in-bootstrap-5#button type="button" data-bs-target="#carouselGames" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselGames" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselGames" data-bs-slide-to="2" aria-label="Slide 3"></button>
          </div>
          
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="https://picsum.photos/seed/43/200/300" class="carousel-img" alt="..."/>
            </div>
            <div class="carousel-item">
              <img src="https://picsum.photos/seed/picsum/200/300" class="carousel-img" alt="..."/>
            </div>
            <div class="carousel-item">
              <img src="https://picsum.photos/seed/7667/200/300" class="carousel-img" alt="...">
            </div>
          </div>
          
          <button class="carousel-control-prev carousel-buttons" type="button" data-bs-target="#carouselGames" 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 carousel-buttons" type="button" data-bs-target="#carouselGames" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>
        </div>
      </section>

      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
   
  </body>
</html>
javascripthtmlcarouselbootstrap-5


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions