如何解决滑块不转换文章元素 (Javascript)
我有一个简单的滑块,其中一篇文章部分设置在屏幕之外,当我单击方向箭头时,我希望它滑入。
代码在下面,但是当我单击“左”按钮时它没有滑入,但我没有收到任何错误消息?
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>
解决方法
您将转换翻译百分比用引号括起来,删除引号即可。
查看示例@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;
});
});
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。