Question

我通过构建滑块来处理我的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。

谢谢。

在单击事件上增加.style.transformX

0 个答案: