Carousel next and prev button not working

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