Carousel next and prev button not working

Question

So for my website I'm trying to implement a Carousel but the pictures are not being resized and the next and prev functions aren't working. Any suggestions?

I tried including the script at the bottom of the html function and making sure the functions were all defined. What I'm trying to do is have the pictures be smaller on the html page and have the prev and next functions underneath the pictures and make sure that the carousel is working

HTML

    <h1 class="header"> Projects </h1>
        <div id="container">
            <div class = "carousel-item fade" style="width: 50%"> 
                <img src = "hackBU.png"> 
                <div class = "carousel-text"> Text </div>

            </div>
            <div class = "carousel-item fade"> 
                <img src = "pigGame.png"> 
                <div class = "carousel-text"> Text </div>

            </div>
            <div class = "carousel-item fade"> 
                <img src = "connect4.png"> 
                <div class = "carousel-text"> Text </div>

            </div>
            <div class = "carousel-item fade"> 
                <img src = "ese123clock.png"> 
                <div class = "carousel-text"> Text </div>

            </div>

            <!-- Next and previous buttons -->
              <a class="prev" onclick="plusItem(-1)">&#10094;</a>
              <a class="next" onclick="plusItem(1)">&#10095;</a>

        </div>





    </div>






    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>

CSS

#projects{
width: auto;
height: 40rem;
margin: 4rem;
text-align: center;


}
.header{

    color: white;
    text-align: center;
    font-family: Helvetica Neue',Helvetica,Arial,sans-serif;

}
.container{
    width: 40rem;
    position: relative;
    margin: auto;
}
.carousel-item{
    display: none;
    width: 10%;
}
.prev,.next{
  cursor: pointer;
  position: inherit;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;


}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: blue;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}


/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

JS

document.addEventListener("DOMContentLoaded", function(event) { 

var itemIndex = 1;
showItem(itemIndex);

// Next/previous controls
function plusItem(n) {
  showItem(itemIndex += n);
}

// Thumbnail image controls
function currentItem(n) {
  showItem(itemIndex = n);
}

function showItem(n) {

  var item = document.getElementsByClassName("carousel-item");
  if (n > item.length) {itemIndex = 1} 
  if (n < 1) {itemIndex = item.length}
  for (var i = 0; i < item.length; i++) {
      item[i].style.display = "none"; 
  }

  item[itemIndex-1].style.display = "block"; 
}
},false);

Answer 1

I'm assuming you just need someone to tell you why your events aren't firing on click; If you need more help than this, please let me know.

The functions you're calling (plusItem) aren't defined when you click the arrow because you're defining them in the "DOMContentLoaded" handler which is not firing.

I would move the function declarations outside the "DOMContentLoaded" handler. See the snippet below;

var itemIndex = 1;
    document.addEventListener("DOMContentLoaded", function(event) {
        showItem(itemIndex);
    },false);

    // Next/previous controls
    function plusItem(n) {
        console.log('plusitem')
        showItem(itemIndex += n);
    }

    // Thumbnail image controls
    function currentItem(n) {
        showItem(itemIndex = n);
    }

    function showItem(n) {

        var item = document.getElementsByClassName("carousel-item");
        if (n > item.length) {itemIndex = 1}
        if (n < 1) {itemIndex = item.length}
        for (var i = 0; i < item.length; i++) {
            item[i].style.display = "none";
        }

        item[itemIndex-1].style.display = "block";
    }

As to why your "DOMContentLoaded" handler isn't firing, I believe this executes too early for a footer script to detect page load. If your script is in the footer ,you shouldn't need to detect page load for this. Alternatively, look at window load: https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

For future reference, it's a great idea to see what feedback the console gives you when developing javascript, as in this case you would see "plusItem is not defined" which would give you a clue. Using console logging ( console.log("abc") ) is also very useful to see which parts of your script are being executed.