Question

我创建了一个非常基本的轮播。目前，我已经使用了一些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

撤消下一个功能以创建上一个幻灯片功能

0 个答案: