简体   繁体   中英

jQuery Slider Navigation Issue

I am building a super simple slider and messing around in CodePen. I have it all working correctly, I just can't seem to figure out why the PREVIOUS button from slide one won't go to slide 4? Anyone see what I am missing? I am guessing it's super simple...

Here's a link to the Pen on Code Pen

http://codepen.io/jacob_weber/pen/ladEw

(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);

Found it! here is the corrected line of 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;   
    }

I originally had it as

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;   
    }

And the CSS error on slide 1 initially was me missing a : setting the padding to 0.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM