1

Добрый день!
Пишу зацикленный слайдер на чистом JS с анимацией смены слайдов (сдвиг). При достижении первого / последнего слайда и дальнейшем прокручивании соответственно назад / вперед анимация слетает, один слайд просто заменяется другим. Подразумевалось, что механизм при достижении, например, первого слайда и нажатии кнопки "Назад" должен быть такой:

  • блок со слайдами сдвигается на ширину одного слайда влево (без анимации);
  • последний слайд вырезается и вставляется на место первого, корректируется величина сдвига (pos);
  • блок со слайдами сдвигается на ширину одного слайда влево (с анимацией).

    Подскажите, пожалуйста, в чем может быть ошибка?

var slideWidth = 300; 
var sliderList = document.querySelector('.slider__list');
var slides = document.querySelectorAll('.slider__item');
var btnPrev = document.querySelector('#prev_slide');
var btnNext = document.querySelector('#next_slide');
var pos = 0;

sliderList.style.width = slides.length * slideWidth + 'px';

btnPrev.onclick = scrollToPrev;
btnNext.onclick = scrollToNext;

function scrollToPrev() {
  pos--;
  
  if (pos < 0) {
    sliderList.style.left = -(pos + 2) * slideWidth + 'px';
    var cloneElem = sliderList.children[slides.length - 1].cloneNode(true);
    sliderList.insertBefore(cloneElem, sliderList.children[0]);
    sliderList.removeChild(sliderList.children[slides.length]);
    pos++;
  }
  
  sliderList.style.left = -(slideWidth * pos) + 'px';
  sliderList.style.transition = 'left 0.6s ease-in-out';
}

function scrollToNext() {
  pos++;
  
  if (pos > slides.length -1) {
    sliderList.style.left = -(pos - 2) * slideWidth + 'px';
    var cloneElem = sliderList.children[0].cloneNode(true);
    sliderList.appendChild(cloneElem);
    sliderList.removeChild(sliderList.children[0]);
    pos--;
    console.log(pos);
  }
  
  sliderList.style.left = -(slideWidth * pos) + 'px';
  sliderList.style.transition = 'left 0.6s ease-in-out';
  
}
.slider {
  width: 300px;
  margin: 50px auto;
}

.slider__container {
  position: relative;
  width: 300px;
  height: 100px;
  overflow: hidden;
}

.slider__list {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  height: 100px;
  list-style: none;
}

.slider__item {
  float: left;
  margin: 0;
  padding: 0;
  width: 300px;
  height: 100px;
  box-sizing: border-box;
  background-color: #eee;
  border: 2px solid black;
  border-radius: 5px;
}

.slider__arrows{
  width:300px;
  text-align:center;
  margin:15px auto
}
.slider__arrow {
  font-size:16px;
  font-weight:bold;
  color:black;
  margin:0 10px;
  cursor: pointer;
}

   
  
<div class="slider">
    <div class="slider__container">
      <ul class="slider__list" data-current="0">
        <li class="slider__item">Слайд 1</li>
        <li class="slider__item">Слайд 2</li>
        <li class="slider__item">Слайд 3</li>
        <li class="slider__item">Слайд 4</li>
        <li class="slider__item">Слайд 5</li>
      </ul>
    </div>
    <div class='slider__arrows'>
      <button class='slider__arrow' id="prev_slide">Назад</button>
      <button class='slider__arrow' id="next_slide">Вперед</button>
    </div>
  </div>

1 ответ 1

2

Проблема возникает из-за оптимизация перерисовки dom дерева в браузере (ответ на похожий вопрос в английском стэке).

Это можно обойти либо дождавшись отрисовки нового узла, а затем применить к нему стиль.

function scrollToPrev() {
  pos--;

  if (pos < 0) {
    var children = sliderList.children;

    sliderList.style.transition = null;
    sliderList.style.left = -(pos + 2) * slideWidth + 'px';
    sliderList.insertBefore(children[slides.length - 1], children[0]);
    pos++;
   }
  requestAnimationFrame(function(){ //ожидаем следующего запланированного reflow/repain;
    requestAnimationFrame(function(){ 
      //предыдущий reflow рассчитал новый dom элемент
      //можно делать анимацию.
      sliderList.style.transition = 'left 0.6s ease-in-out';
      sliderList.style.left = -(slideWidth * pos) + 'px';
    })
  });
}

Либо заставив браузер сделать reflow/repaint

function scrollToPrev() {
  pos--;

  if (pos < 0) {
    var children = sliderList.children;
    sliderList.style.transition = null;
    sliderList.style.left = -(pos + 2) * slideWidth + 'px';
    sliderList.insertBefore(children[slides.length - 1], children[0]);
    children[0].offsetParent //запрашивает какую-нибуть метрику dom для reflow
    pos++;
  }

   sliderList.style.transition = 'left 0.6s ease-in-out';
   sliderList.style.left = -(slideWidth * pos) + 'px';
}

Также можно решить через добавление специального класса к элементам после их добавления в дерево с animation и keyframes, без transition (пример от Christian Heilmann на fiddle).

Но это потребует отдельного кода для промотки последних элементов и внутренних элементов, что может быть не желательно.

4
  • Тоже пробовала делать похожим методом, как в английском стэке (через setTimeout) - если с первого слайда начать пролистывать назад, то в первый раз прокручивает нормально, а потом опять почему-то начинает просто "перещелкивать". Ваши варианты тоже такой эффект дают (только я еще добавила в конец блока с условием pos++) - вот так получилось. С классами буду думать, спасибо!
    – maridu
    27 ноя 2017 в 17:38
  • Поправил повторное прокручивание. Проблема возникала из-за того что при повторном прокручивании у вас уже был выставлен transition, при изменении left (сдвиге в право) он срабатывал и мешал сделать сдвиг влево.
    – Arnial
    27 ноя 2017 в 21:29
  • Достаточно обнулить transition в if ветке. Тогда оба примера будут работать нормально.
    – Arnial
    27 ноя 2017 в 21:31
  • Спасибо огромное, все работает!
    – maridu
    27 ноя 2017 в 21:57

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.