jQuery Карусель Следующие/Предыдущие кнопки

Question

Вот Link to the Fiddle.

Я работаю с карусели, и я хочу сделать следующие/предыдущие функциональные кнопки.

Я попытался добавить следующий код, но он не обновляет индекс должным образом. Любая помощь будет оценена!

$($btnNext).click(function (event) { 
    updateSlides(index + 1); 
    event.preventDefault(); 
} 
$($btnPrev).click(function (event) { 
    updateSlides(index - 1); 
    event.preventDefault(); 
} 

Answer 1

Когда click события на этих кнопках называется, что index переменные не определенно. Есть несколько различных способов выяснить, индекс, метод, который я использовал в скрипкой был установить attribute на slider, а затем проверить его на click событий:

function updateSlides(index, paused) { 
    $($slider).attr('data-index', index); 
    ... 
} 

$($btnNext).click(function (event) { 
    var index = parseInt($('.slider').attr('data-index')); 
    if(index > $('.slider .content li').length) { 
     index = 0; 
    } 
    console.log('#next', index); 
    updateSlides(index + 1); 
    event.preventDefault(); 
}); 

$($btnPrev).click(function (event) { 
    var index = parseInt($('.slider').attr('data-index')); 
    if(index < 0) { 
     index = 0; 
    } 
    console.log('#previous', index); 
    updateSlides(index - 1); 
    event.preventDefault(); 
}); 

Смотрите обновленную скрипку здесь: http://jsfiddle.net/sbp76sLc/14/