появляются объекты на основе счетчика

Question

Я пытаюсь написать простую игру, основанную на счетчике, фон в виде изображений:

• каждый клик по → увеличивает счетчик на единицуи показывает следующее изображение

• каждый клик по ← уменьшает счетчик на единицу и показывает предыдущее изображение

Счетчик работаетв [0,5] я пытался написать оператор if, показывающий или скрывающий объекты на основе счетчика.

Дело в том, что он работает тремя разными способами, ни один из них не такой, как я хочу:

• Он показывает все объекты все время

• он не показывает никакого объекта

• или показывает только первый объект, и странно, что я не могу перейти к последнему слайду, он только что закончился на одном ранеепрошлой.

Есть идеи или советы, как это решить?

var counter = 0;
slides[counter].style.display = "block";

// hide buttons
function hideButtons() {
  left.style.display = "none";
  right.style.display = "none";
}

function slideRight() {


  hideButtons()
  //to stop slides on 0
  if (counter >= slides.length - 1) {
    return;
  }

  slides[counter].style.display = "none";
  counter += 1;
  slides[counter].style.display = "block";


  // after clicking on arrow, position is reseted
  //         var heroMovement = document.querySelector(".hero");
  // let oldTransition = heroMovement.style.transition;
  heroMovement.style.transition = "unset";
  heroMovement.style.transform = "translate3d(30px, 100px, 0)";

}


function slideLeft() {
  hideButtons()

  if (counter <= 0) {
    return;
  }

  slides[counter].style.display = "none";
  counter -= 1;
  slides[counter].style.display = "block";


  heroMovement.style.transition = "unset";
  heroMovement.style.transform = "translate3d(1350px, 100px, 0)";
}


right.addEventListener("click", slideRight);
left.addEventListener("click", slideLeft);

//appearing of characters
// showCharacters()

function showCharacters() {
  var girl = document.querySelector(".girl");
  var lakeGuy = document.querySelector(".lakeGuy");
  var contestGuy = document.querySelector(".contestGuy");


  if (counter <= 1) {
    girl.style.display = "none";
    lakeGuy.style.display = "none";
    contestGuy.style.display = "none";
  } else if (counter = 2) {
    girl.style.display = "block";
  } else if (counter = 3) {
    girl.style.display = "none";
    lakeGuy.style.display = "block";
    contestGuy.style.display = "none";

  } else if (counter = slides.length) {
    lakeGuy.style.display = "none";
    contestGuy.style.display = "block";
  }
}

.girl {
  position: absolute;
  transform: translate3d(700px, 30px, 0);
  width: 50px;
  height: 50px;
  display: inline-block;
  border: 1px solid black;
  border-radius: 50%;
  background-color: red;
  z-index: 1;
  //display: none;
}

.lakeGuy {
  position: absolute;
  transform: translate3d(500px, 10px, 0);
  width: 50px;
  height: 50px;
  display: inline-block;
  border: 1px solid black;
  border-radius: 50%;
  background-color: #3affa0;
  z-index: 1;
  display: none;
}

.contestGuy {
  position: absolute;
  transform: translate3d(900px, 120px, 0);
  width: 50px;
  height: 50px;
  display: inline-block;
  border: 1px solid black;
  border-radius: 50%;
  background-color: #f838ff;
  z-index: 1;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="slider">
  <li><img class="uno" src="images/zero/DSC_0732.JPG"></li>
  <li><img class="duo" src="images/jeden/DSC_0757.JPG"></li>
  <li><img class="tres" src="images/dwa/DSC_0786.JPG"></li>
  <li><img class="tretio" src="images/trzy/DSC_0793.JPG"></li>
  <li><img class="quico" src="images/cztery/DSC_0750.JPG"></li>
</ul>

<div id="emptySpace">
  <span class="opisujacyX">X to :</span>
  <span class="opisujacyY">Y to :</span>
  <span class="left"></span>
  <span class="right"></span>
</div>


<div id="boxMap"></div>

Answer 1

= - это оператор присваивания, например, когда вы присваиваете переменные строкам, числам, объектам и т. Д. == и === - операторы равенства.Попробуйте изменить это в своем другом, если это.Я не видел ни одной переменной «слайды», объявленной где-либо.