Кнопка "Карусель" вперед и назад не работает

Question

Так что для моего сайта я пытаюсь реализовать Карусель, но размеры картинок не меняются, а функции next и prev не работают. Какие-либо предложения?

Я попытался включить скрипт внизу html-функции и убедиться, что все функции определены. Я пытаюсь сделать так, чтобы на html-странице картинки были меньше, а под картинками - функции prev и next, чтобы убедиться, что карусель работает

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

Полагаю, вам нужен кто-то, кто скажет вам, почему ваши события не запускаются при клике; Если вам нужна дополнительная помощь, пожалуйста, дайте мне знать.

Функции, которые вы вызываете (plusItem), не определяются, когда вы нажимаете стрелку, потому что вы определяете их в обработчике "DOMContentLoaded", который не запускается.

Я бы переместил объявления функций за пределы обработчика "DOMContentLoaded". Смотрите фрагмент ниже;

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

Что касается того, почему ваш обработчик "DOMContentLoaded" не запускается, я считаю, что он выполняется слишком рано для сценария нижнего колонтитула, чтобы обнаружить загрузку страницы. Если ваш скрипт находится в нижнем колонтитуле, вам не нужно определять загрузку страницы для этого. В качестве альтернативы посмотрите на загрузку окна: https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

Для дальнейшего использования, это отличная идея, чтобы увидеть, какую обратную связь дает вам консоль при разработке javascript, так как в этом случае вы увидите «plusItem не определен», что даст вам подсказку. Использование ведения журнала консоли ( console.log ("abc") ) также очень полезно, чтобы увидеть, какие части вашего скрипта выполняются.