1

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
    });  
});


$(document).ready(function() {
  $('.carousel').carousel({
    ride: "true",
    interval: 1000
  });
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
isherwood
  • 58,414
  • 16
  • 114
  • 157
HJP
  • 47
  • 4

1 Answers1

2

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/bootstrap@5.1.3/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/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
isherwood
  • 58,414
  • 16
  • 114
  • 157
  • 1
    In addition to Isherwood's fix I would say that you do not need the JS for slide intervals. You could simply add `data-bs-interval="8000"` to each of the `carousel-item` Divs. – Cutey from Cute Code Nov 02 '21 at 12:07