JavaScript轮播。它有效，但不如我所愿

Question

<div class="container">
        <div class="arrowLeft" onclick="myMoveLeft()">
            <i class="fas fa-chevron-left fa-5x"></i>
        </div>
        <div class="caroselloContainer">
            <div id="carosello">
                <div class="caroselloCard">
                    <img class="active first"
                    src="..."
                    alt="">
                </div>
                <div class="caroselloCard">
                    <img src="..."
                    alt="">
                </div>
                <div class="caroselloCard">
                    <img class="last"
                    src="..."
                    alt="">
                </div>
            </div>
        </div>
        <div class="arrowRight" onclick="myMoveRight()">
            <i class="fas fa-chevron-right fa-5x"></i>
        </div>
    </div>
  <script>
      var carousel = document.getElementById("carosello");

      function myMoveLeft() {
        carousel.scrollTo(- 50, 0);
      }
      function myMoveRight() {
        carousel.scrollTo(+ 50, 0);
      }
</script>

这有效，但仅在第一次单击时有效。如何使它始终有效？我希望每次单击时，scrollTo都会增加50。甚至更好的是，它可以模拟滚动，但是第一个解决方案也足够了。

Answer 1

您可以滚动变量的位置，然后增加/减少它。

[现在无论您单击多少次，scrollPosition设置为-50或50，现在都必须不断更新点击值。

赞

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