Показать сообщение отдельно
  #1 (permalink)  
Старый 01.03.2019, 19:33
Аспирант
Отправить личное сообщение для TheSanches Посмотреть профиль Найти все сообщения от TheSanches
 
Регистрация: 21.01.2018
Сообщений: 78

Слайдер карусель
Доброго времени суток, пытаюсь сделать слайдер карусель, помогите разобраться.

При клике в право все работает как надуманно, но вот запрограммировать вторую кнопку (клик влево) не могу, не получается правильно написать алгоритм действий, который будет высчитывать текущее значение 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;
Ответить с цитированием