Javascript 单击事件时递增.style.transformX

我正在通过构建一个滑块来提高我的javascript技能……但是我在这个问题上陷入了困境

在每次单击事件中，我都要增加translateX上的px值

我的最佳尝试是使滑块工作，但它只是在上一次单击的顶部插入内联css

HTML

这是当前的代码

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

---

谢谢。

请同时发布相关的HTML和CSS好吗？通过这种方式，我们可以更容易地为您提供与您的情况直接相关的帮助，并且在以后的示例中，其他人也可以更容易地理解。人们不需要CSS，因为我所做的只是插入在JS中创建的内联样式。我已经扩展了JS并添加了HTML。当用户单击相关的

.slider\uu按钮

元素时，您希望该值增加/减少多少？至于CSS，到目前为止提供的代码（在写这篇评论时）给出了这样的结果：，我忍不住认为它应该看起来“更漂亮”，这样用户就可以看到效果和UI。我只想让它通过

sliderWidth

变量值递增/递减。好的，我已经添加了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 //