l oop через массив для создания слайдера изображений с ванилью javascript

Question

Я пытаюсь создать карусель изображений и хочу, чтобы изображения проходили через массив oop. Код явно работает, потому что появляется предупреждение «нет щелчка», но я не понимаю, что я делаю неправильно.

Вот JS. Я знаю, что проблема, скорее всего, утверждение if. Я новичок в JS и не совсем понял, как правильно кодировать этот бит. В каком-то псевдокоде в идеале было бы «если щелкнуть btn, а затем показать следующее изображение».

let images = ["img1.jpg", "img2.jpg", "img3.jpg"];
let img = images.length;
let x = 0;

function whenClicked(e) {

for (let i = 0; i < img; i++) {
if (x == 0) {
   document.getElementById("img1").style.backgroundImage = ++img;
} else alert("no click!")
}
}

const btnLeft = document.getElementById("btn-left");
const btnRight = document.getElementById("btn-right");


btnLeft.addEventListener("click", whenClicked);
btnRight.addEventListener("click", whenClicked);

А здесь HTML.

<div class="slide-container">

    <div class="slide" id="img1">
        <i class="fas fa-arrow-circle-left fa-3x" id="btn-left"  ></i>
        <i class="fas fa-arrow-circle-right fa-3x" id="btn-right" ></i>
    </div>



</div>

CSS.

.slide-container {

}

.slide {
height: 789px;
width: 100%; 

background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.slide:nth-child(1) {
background-image: url(../img/img1.jpg);

}

.slide:nth-child(2) {
background-image: url(../img/img2.jpg);
}

.slide:nth-child(3) {
background-image: url(../img/img3.jpg);
}

#btn-left {
position: absolute;
top: 400px;
 }
#btn-right {
position: absolute;
left: 1380px;
top: 400px;
}

Будем очень благодарны за предложения о том, что нужно сделать для улучшения!

Answer 1

  let currentImage = 0;
  let images = ["img1.jpg", "img2.jpg", "img3.jpg"];

  function whenClicked(e) {
    if(e.target.id == 'btn-left') {
      currentImage--;
    } else {
      currentImage++;
    }
    if(currentImage > images.length-1) { 
      currentImage = 0; 
    }
    if(currentImage < 0) { 
      currentImage = images.length-1;
    }
    document.getElementById("img1").style.backgroundImage = url('img/'+images[currentImage]);
  }

Answer 2

Возможно, вы слишком усложняете свой подход. Старайтесь отслеживать, какое изображение отображается в данный момент и какое изображение должно быть следующим. Вы почти делаете это, я полагаю, это ваше намерение, с переменной x. Это отличный способ выбрать изображение из массива, просто набрав images[x], что в начале означает images[0].

Так что если вы хотите разработать систему, которая изменяет фоновое изображение сдвиньте, тогда ваши кнопки должны будут изменить значение переменной x. Давайте дадим этой переменной более ясное имя, например currentIndex, которое представляет текущий индекс в массиве images. Или, чтобы быть понятным, текущее изображение, которое мы видим.

Когда вы нажмете правую кнопку, вы захотите следующее изображение. Следующие изображения в массиве images - images[1]. Все, что вам нужно сделать, это обновить значение currentImage с помощью +1 или ++ и выбрать следующее изображение с помощью images[currentIndex], чтобы получить следующее.

То же самое касается левой кнопки, которая должна удалить 1 от currentImage с -1 или -- до go на один индекс в массиве images. Затем выберите изображение таким же образом с помощью images[currentIndex].

. Теперь для обеих этих кнопок вам нужно проверить, не прошли ли вы на go начало или конец массива images. currentIndex не может быть ниже 0 и с 3 изображениями в массиве, значение currentIndex не должно превышать 2, так как мы считаем с [0, 1, 2] в массиве изображений.

Ниже Я сделал реализацию этой системы. Я надеюсь, что это то, что вы намеревались сделать. Если у меня нет ясности или у вас есть вопрос, не стесняйтесь спрашивать.

let images = ["img1.jpg", "img2.jpg", "img3.jpg"];
let amountOfImages = images.length;
let currentIndex = 0;

const slide = document.getElementById("img1");
const btnLeft = document.getElementById("btn-left");
const btnRight = document.getElementById("btn-right");

function prevImage() {
  if (currentIndex > 0) { // Can't go lower than 0.
    currentIndex--;
    updateImage();
  }
}

function nextImage() {
  if (currentIndex < amountOfImages - 1) { // Can't go higher than the amount of images present.
    currentIndex++;
    updateImage();
  }
}

function updateImage() {
  slide.style.backgroundImage = images[currentIndex];
}

btnLeft.addEventListener("click", prevImage);
btnRight.addEventListener("click", nextImage);