Javascript карусель работает, но не так, как хотелось бы

Question

Вот код для моей javascript карусели:

var carousel = document.getElementById("carosello");

function myMoveLeft() {
  carousel.scrollTo(-50, 0);
}

function myMoveRight() {
  carousel.scrollTo(+50, 0);
}

Это работает, но только при первом щелчке. Как заставить его работать при всех щелчках?

Я бы хотел, чтобы каждый раз, когда я щелкаю, scrollTo увеличивалось на 50. Что-то, имитирующее прокрутку, было бы еще лучше, но первого решения также будет достаточно .

Answer 1

Вы можете scrollPosition в переменной, а затем увеличивать / уменьшать ее.

Что происходит сейчас, независимо от того, сколько раз вы щелкаете, для вашего scrollPosition установлено значение -50 или 50, вы должны продолжайте обновлять эти значения при кликах.

Like

<script>
  var carousel = document.getElementById("carosello");
  var scrollPosition = 0;
  function myMoveLeft() {
    scrollPosition = scrollPosition - 50;
    carousel.scrollTo(scrollPosition, 0);
  }
  function myMoveRight() {
    scrollPosition = scrollPosition + 50;
    carousel.scrollTo(scrollPosition, 0);
  }
</script>