Увеличение .style.transformX по событию клика - PullRequest
Новая
       3

Увеличение .style.transformX по событию клика

0 голосов
/ 03 июня 2018

Я работаю над своими навыками JavaScript, создавая слайдер ... однако я застрял в этой проблеме.

При каждом событии щелчка я хочу увеличивать значение px в translateX.

Моя лучшая попытка - использовать ползунок, однако он просто вставлял встроенный 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.

Спасибо.

...