Доброго времени суток, пытаюсь сделать слайдер карусель, помогите разобраться.
При клике в право все работает как надуманно, но вот запрограммировать вторую кнопку (клик влево) не могу, не получается правильно написать алгоритм действий, который будет высчитывать текущее значение transition, и соответственно увеличивать его на ширину слайда.
Короче говоря функцию sliderScrollLeft() не получается правильно запрограммировать.
Возможно весь алгоритм написан не верно, прошу помощи, спасибо.
<div class="slider">
<div class="slider__btn slider__btn_left"></div>
<div class="slider__btn slider__btn_right"></div>
<div class="slider__container">
<div class="slider__scroll">
<div class="slider__item"></div>
<div class="slider__item"></div>
<div class="slider__item"></div>
</div>
</div>
</div>
var sliderBtnLeft = document.querySelector('.slider__btn_left');
var sliderBtnRight = document.querySelector('.slider__btn_right');
var sliderContainer = document.querySelector('.slider__container').offsetWidth;
var sliderItems = document.querySelectorAll('.slider__item');
var sliderScroll = document.querySelector('.slider__scroll');
var sliderContainerIndex = sliderContainer;
var sliderIndex = 0;
function sliderScrollRight(){
if(sliderIndex < sliderItems.length - 1){
sliderScroll.style.transform = 'translateX(-' + sliderContainerIndex + 'px)';
sliderContainerIndex += sliderContainer;
sliderIndex++;
}
else{
sliderIndex = 0;
sliderContainerIndex = sliderContainer;
sliderScroll.style.transform = 'translateX(0)';
}
}
function sliderScrollLeft(){
}
sliderBtnRight.onclick = sliderScrollRight;
sliderBtnLeft.onclick = sliderScrollLeft;