Question

我正在构建一个超级简单的滑块并在CodePen中搞乱。我把它全部正常工作，我似乎无法弄清楚为什么来自幻灯片1的PREVIOUS按钮不会进入幻灯片4？有人看到我错过了吗？我猜这很简单......

以下是代码笔上笔的链接

(function($) {
  var sliderUL = $('div.slider').css('overflow', 'hidden').children('ul'),
  imgs = sliderUL.find('img'),
  imgWidth = imgs[0].width, //600
  imgsLen = imgs.length, //4
  current = 1,
  totalImgsWidth = imgsLen * imgWidth ; //2400

  $('#slider-nav').show().find('button').on('click', function(){
    var direction = $(this).data('dir'),
    loc = imgWidth; // 600

//update current value based on direction button clicked
( direction === 'next') ? ++current : --current;

// if first image
if (current === 0) {
  current = imgsLen;
  loc = totalImgsWidth - imgWidth; //1800
  direction === 'next';
} else if ( current - 1 === imgsLen) { //Are we at the end? Should it reset?
  current = 1;
  loc = 0;   
}
transition(sliderUL, loc, direction);


  });

  function transition( container, loc, direction ){
var unit; // -= or +=

if ( direction && loc !== 0 ) {
  unit = ( direction === 'next') ? '-=' : '+=';

}


container.animate({
  'margin-left': unit ? ( unit + loc) : loc
});

  }




})(jQuery);

Answer 1

发现它！这是jQuery的更正行

if ( current === 0 ) {
      current = imgsLen;
      loc = totalImgsWidth - imgWidth; //1800
      direction = 'next';
    } else if ( current - 1 === imgsLen) { //Are we at the end? Should it reset?
      current = 1;
      loc = 0;   
    }

我原来是

if ( current === 0 ) {
      current = imgsLen;
      loc = totalImgsWidth - imgWidth; //1800
      direction === 'next';
    } else if ( current - 1 === imgsLen) { //Are we at the end? Should it reset?
      current = 1;
      loc = 0;   
    }

幻灯片1上的CSS错误最初是我错过了：将填充设置为0.

jQuery滑块导航问题

1 个答案: