jQuery Carousel下一个/上一个按钮

Question

这是小提琴的链接 。

我正在使用轮播，并且想使下一个/上一个按钮起作用。

我尝试添加以下代码，但无法正确更新索引。 任何帮助，将不胜感激！

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

Answer 1

调用这些按钮上的click事件时，该index变量未定义。 找出索引有几种不同的方法，我在小提琴中使用的方法是在slider上设置一个attribute ，然后在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/