jQuery Carousel Next / Previous Buttons

Question

Here's the Link to the Fiddle.

I'm working with a carousel and I want to make the next/previous buttons functional.

I tried adding the following code but it doesn't update the index properly. Any help would be appreciated!

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

Answer 1

When the click event on those buttons is called, that index variable is undefined. There are several different ways of figuring out the index, the method I used in the fiddle was to set an attribute on the slider and then check it on the click events:

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

See the updated fiddle here: http://jsfiddle.net/sbp76sLc/14/