滑块未转换项目元素（Javascript）

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

下面是代码，但当我单击“左”按钮时，它不会滑入，但我没有收到任何错误消息

var leftButton=document.getElementById（“左按钮”），
rightButton=document.getElementById（“右按钮”），
article=document.queryselectoral（“.article”），
计数器=0，
articleWidth=article.offsetWidth；
如果（计数器==0）{
leftButton.addEventListener（“单击”），函数（）{
第条forEach（职能（项目）{
item.style.transform='translateX（“-100%”）；
计数器+=1；
});
});
}

*{
保证金：0；
框大小：边框框；
}
身体{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
高度：100vh；
}
.行{
宽度：50%；
背景：红色；
溢出：隐藏；
边缘底部：2rem；
}
.商品包装{
显示器：flex；
宽度：130%；
}
.文章{
宽度：70%；
背景：蓝色；
保证金：0.1rem；
填充：4rem1rem；
}
p{
颜色：白色；
}

第1条
第2条

第3条
左边
右

将变换-转换百分比用引号括起来，删除引号，它就会起作用

请参见@MDN的示例：

if（计数器==0）{
leftButton.addEventListener（“单击”），函数（）{
第条forEach（职能（项目）{
//不要在translateX属性中用引号括起百分比或值
item.style.transform='translateX（-100%）'；
计数器+=1；
});
});
}

您需要

translateX（-100%）

，不带引号。