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滑塊導航問題

回答

相關問題