Переверните следующую функциональность, чтобы создать предыдущую функциональность слайдов - PullRequest
Новая
       7

Переверните следующую функциональность, чтобы создать предыдущую функциональность слайдов

0 голосов
/ 13 января 2019

Я создал очень простую карусель. В настоящее время я использовал немного кода jQuery для создания следующего слайда. Хотя предыдущая функциональность слайдов оказывается более сложной. Я думаю, что проблема в том, что первый слайд не имеет слайда перед ним в начале DOM, и это вызывает некоторую путаницу.

Я попытался добавить элементы при загрузке страницы и также попытался добавить элементы при нажатии предыдущей кнопки. 

<div class="carousel">
  <div class="carousel__item">
    test1 left
  </div>
  <div class="carousel__item carousel__item--active">
    test2 active
  </div>
  <div class="carousel__item">
    test3 right
  </div>
  <div class="carousel__item">
    test4
  </div>
  <div class="carousel__item">
    test5
  </div>
</div>
<button class="next">
  next
</button>
<button class="prev">
  prev
</button>

$('.carousel__item--active').prev().addClass('carousel__item--left');
  $('.carousel__item--active').next().addClass('carousel__item--right');

$('.next').on('click', function() {
  var activeSlide = $('.carousel__item--active');
  $('.carousel__item--left').removeClass('carousel__item--left');
  activeSlide.removeClass('carousel__item--active').addClass('carousel__item--left');
  $('.carousel__item--right').removeClass('carousel__item--right').addClass('carousel__item--active');
  $('.carousel__item--active').next().addClass('carousel__item--right');
  $('.carousel__item--active').prev().addClass('carousel__item--left');
  $('.carousel').append($('.carousel__item--left').prevAll())
})   

$('.prev').on('click', function() {
  var activeSlide = $('.carousel__item--active');

  $('.carousel__item--left').removeClass('carousel__item--left').addClass('carousel__item--active');
  activeSlide.removeClass('carousel__item--active').addClass('carousel__item--left');
  $('.carousel__item--right').removeClass('carousel__item--right');
  $('.carousel__item--active').next().addClass('carousel__item--right');    
  $('.carousel__item--active').prev().addClass('carousel__item--left');
  $('.carousel').prepend($('.carousel__item--right').nextAll());
})

Пожалуйста, найдите пример кода. https://codepen.io/anon/pen/qLLrjg?editors=1010

...