javascript - 在点击事件上增加 .style.transformX
问题描述
我正在通过构建一个滑块来提高我的 javascript 技能......但是我已经陷入了这个问题。
在每次点击事件中,我想增加 translateX 上的 px 值。
我最好的尝试是让滑块工作,但它只是在上一次点击的顶部插入内联 css。
HTML
<div class="slider">
<button class="slider__button slider__button--left"></button>
<div class="slider__viewport">
<div class="slider__slide"></div>
<div class="slider__slide"></div>
<div class="slider__slide"></div>
</div>
<button class="slider__button slider__button--right"></button>
</div>
CSS
.slider-wrapper {
height:500px;
}
.slider {
position: relative;
max-width: 1200px;
width: 100%;
height: 500px;
background-color: red;
overflow: hidden;
}
.slider__viewport {
display: flex;
width: 100%;
height: 100%;
}
.slider__slide {
flex-shrink: 0;
max-width: 1200px;
width: 100%;
height: 100%;
background-color: yellow;
border: 1px solid red;
float: left;
}
.slider__slide:nth-of-type(3) {
background-color: purple;
}
.slider__slide:nth-of-type(2) {
background-color: green;
}
.slider__button {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
z-index: 999;
}
.slider__button--left {
left: 5%;
background-color: blue;
}
.slider__button--right {
right: 5%;
background-color: red;
}
这是当前代码。
const sliderButtonRight = document.querySelector('.slider__button--
right');
const sliderViewport = document.querySelector('.slider__viewport');
const sliders = [...document.querySelectorAll('.slider__slide')];
const sliderWidth = sliders[0].getBoundingClientRect().width;
// The code in question //
sliderButtonRight.addEventListener('click', () => {
sliderViewport.style.transform = `translateX(-${sliderWidth}px)`;
});
// Comment End //
请只使用内置 Javascript,不要使用 jQuery。
谢谢你。
解决方案
推荐阅读
- css - 在 Kendo Grid 单元格中添加链接按钮(可编辑)
- c# - C# 将枚举“名称”和枚举值传递给方法
- opencv - 如何为 OpenCV 项目创建一个简单的 makefile?
- oracle-apex - 如何调用 AJAX 回调来上传文件?
- stanford-nlp - Google Colab 中的情感分析斯坦福 NLP
- here-api - HERE api Auto 建议不再返回位置
- javascript - 单击编辑按钮时如何获取图像名称?
- html - 悬停不覆盖整个 li - css
- azure - Azure DevOps - 多租户数据库部署
- android - 添加到迁移后,当前架构中不存在类