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.