滑块不转换文章元素 (Javascript)

Question

我有一个简单的滑块，其中一篇文章部分设置在屏幕外，当我单击方向箭头时，我希望它滑入。

代码在下面，但是当我点击 'left' 按钮时它没有滑入，但我没有收到任何错误消息？

var leftButton = document.getElementById("left-button"),
  rightButton = document.getElementById("right-button"),
  article = document.querySelectorAll(".article"),
  counter = 0,
  articleWidth = article.offsetWidth;

if (counter === 0) {
  leftButton.addEventListener("click", function () {
    article.forEach(function (item) {
      item.style.transform = 'translateX("-100%")';
      counter += 1;
    });
  });
}

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.row {
  width: 50%;
  background: red;
  overflow: hidden;
  margin-bottom: 2rem;
}

.article-wrapper {
  display: flex;
  width: 130%;
}

.article {
  width: 70%;
  background: blue;
  margin: 0 1rem;
  padding: 4rem 1rem;
}

p {
  color: white;
}

<div class="row">
  <div class="article-wrapper">
    <article class="article">
      <p class="td">Article 1</p>
    </article>
    <article class="article">
      <p class="td">Article 2</p>
    </article>
    <article class="article">
      <p class="td">Article 3</p>
    </article>
  </div>
</div>
<button id="left-button">Left</button>
<button id="right-button">Right</button>

Answer 1

您的转换翻译百分比用引号引起来，删除引号即可。

查看示例@ MDN：MDN translateX()

if (counter === 0) {
  leftButton.addEventListener("click", function () {
    article.forEach(function (item) {
      // do not wrap your percentage or value in quotes within the translateX property 
      item.style.transform = 'translateX(-100%)';
      counter += 1;
    });
  });
}

滑块不转换文章元素 (Javascript)

Slider Not Transforming Article Element (Javascript)

javascript

css

events

transform