Why does my Bootstrap carousel only move once?-CodePudding

I'm trying to implement a Bootstrap Carousel into my website however I am having an issue with it where it will only move once and will become unresponsive. I've checked the ordering of the files and that doesn't seem to be an issue. So this has left me stumped on what is causing my issue.

HTML:

<div class="container bg-secondary" id="projectContainer">       
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
              <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img class="d-block w-100" src="styles\media\gazeteerScreenShot.png" alt="First slide">
              </div>
              <div class="carousel-item">
                <img class="d-block w-100" src="styles\media\gazeteerInfoScreenShot.png" alt="Second slide">
              </div>
              <div class="carousel-item">
                <img class="d-block w-100" src="styles\media\gazeteerMarkerScreenShot.png" alt="Third slide">
              </div>
              <div class="carousel-item">
                <img class="d-block w-100" src="styles\media\gazeteerWebcamScreenShot.png" alt="Fourth slide">
              </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev" onclick="$('.carousel').carousel('prev')">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next" onclick="$('.carousel').carousel('next')">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
    </div>

How my JS files are ordered:

<!-- jQuery Required File -->
<script type="text/javascript" src="libs\jQuery\jquery-3.6.0.min.js"></script>
<!-- The Main Javascript file, this contains all our jQuery and PHP -->
<script type="text/javascript" src="libs/js/script.js"></script>  
<!-- Bootstrap JS -->
<script  type="text/javascript" src="bootstrap-5.1.3-dist\js\bootstrap.bundle.min.js"></script>

Javascript/jQuery:

$(document).ready(function() {
    $('.carousel').carousel({
        ride: "true",
        interval: 1000
    });  
});

Show code snippet

$(document).ready(function() {
  $('.carousel').carousel({
    ride: "true",
    interval: 1000
  });
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container bg-secondary" id="projectContainer">
  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" src="styles\media\gazeteerScreenShot.png" alt="First slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="styles\media\gazeteerInfoScreenShot.png" alt="Second slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="styles\media\gazeteerMarkerScreenShot.png" alt="Third slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="styles\media\gazeteerWebcamScreenShot.png" alt="Fourth slide">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev" onclick="$('.carousel').carousel('prev')">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next" onclick="$('.carousel').carousel('next')">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
How my JS files are ordered:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<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>

CodePudding user response：

The primary problem is that you were one indicator short. The script was erroring when it tried to find the last one.

Uncaught TypeError: Cannot read properties of null (reading 'classList')
    at st._setActiveIndicatorElement (carousel.js:364)
    at st._slide (carousel.js:435)
    at st.next (carousel.js:142)
    at Function.carouselInterface (carousel.js:526)
    at HTMLDivElement.<anonymous> (carousel.js:535)
    at Function.each (jquery.min.js:2)
    at S.fn.init.each (jquery.min.js:2)
    at S.fn.init.jQueryInterface [as carousel] (carousel.js:534)
    at HTMLAnchorElement.onclick (js:37)

You seem to be missing -bs in your data attributes. See the docs.

Also, no Bootstrap library is going to call for onclick attributes in the markup. That's what the data attributes do.

$(document).ready(function() {
  $('.carousel').carousel({
    ride: "true",
    interval: 1000
  });
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container bg-secondary" id="projectContainer">
  <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
    <ol class="carousel-indicators">
      <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
      <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
      <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
      <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3"></li>
    </ol>

    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" src="https://via.placeholder.com/1200x300" alt="First slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://via.placeholder.com/1200x300" alt="Second slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://via.placeholder.com/1200x300" alt="Third slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://via.placeholder.com/1200x300" alt="Fourth slide">
      </div>
    </div>
    
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<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>