jQuery滑块导航问题

我正在构建一个超级简单的滑块并在CodePen中搞乱。我有这一切工作正常，我似乎无法弄清楚为什么从幻灯片1的前一个按钮不会去幻灯片4？任何人都能看到我缺少的东西？我猜测这是超级简单......jQuery滑块导航问题

下面是钢笔的链接代码笔

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

来源

2014-02-13 jacob

您的代码笔似乎没有工作。这是它在本地寻找你的方式吗？ – badAdviceGuy

@badAdviceGuy是的，我在里面 - 我只是重新保存它 - 并且必须将JS设置为jQuery - http://codepen.io/jacob_weber/pen/ladEw – jacob

好吧，我找到了它！在第一张图片中，我使用=设置'方向==='下一个''VS。但是现在我唯一看到的是第一张幻灯片最初有一个左边距？任何想法，从哪里拉入？ – jacob

找到了！这里是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

来源

2014-02-13 17:15:00 jacob

jQuery滑块导航问题

回答

相关问题