有关如何修复内容滑块的上一个和下一个按钮的建议

Question

我正在尝试在内容滑块中添加上一个和下一个按钮，但是似乎有问题，我真正想做的是每次单击上一个或下一个按钮时，将$ slideCtn左右移动widthSlideWidth但是我不确定如何通过slideWidth的值增加每次点击。 我已经尝试过++和-等，但是没有结果，有人能向我展示执行此类操作的最佳方法吗？ 也有任何其他建议非常欢迎！

还是应该创建一个设置为0的全局索引变量，然后在单击分页x或单击上一个/下一个箭头时更新此全局变量？

JS代码段

//Add previous + next arrows
$dirArrows.on('click', function(e){

    var arrDir = $(this).data('dir');

    $slideCtn.css('left', ( arrDir === 'prev' ) ? -(slideWidth) : +(slideWidth));

    e.preventDefault();
});

JS小提琴 http://jsfiddle.net/SG5ad/10/

Answer 1

目前，您是在告诉它移动到绝对位置--200px或+ 200px（永远不要为0px，400px，600px等）。

您需要考虑其当前位置以及要调整的位置： http : //jsfiddle.net/SG5ad/12/

var arrDir = $(this).data('dir')
    iLeft = parseInt( $slideCtn.css('left') );

$slideCtn.css('left', ( arrDir === 'prev' ) ? iLeft - slideWidth : iLeft + slideWidth);

您还需要修复的一个错误是，“下一个/上一个”按钮将不执行任何操作，直到您已经通过“ x”导航跳到特定的幻灯片。

---

作为一个完全独立的问题，大约六个月前，我在工作中的项目中写了这样的内容（它有许多风吹草动，但没有太大的不同），我想说的一件重要的事情值得改变。

为了此时从幻灯片a转到幻灯片d ，请对幻灯片a ， b ， c和d动画处理，这意味着
a）4张幻灯片正在制作动画，而不是1张（加上其所有子元素）
b）即使幻灯片b和c不相关，也必须通过它们

我将看看如何使用z-index将所有幻灯片的基本位置更改为彼此堆叠，然后简单地将顶部幻灯片动画化为一侧，以露出其下方的一侧。 它需要一些代码来跟踪哪些幻灯片在哪里（ $.data()可能对您有所帮助），但在结尾处为您提供了性能更高的滑块。

Answer 2

您必须使用.animate（）

$dirArrows.on('click', function(e){

    var arrDir = $(this).data('dir');

    if (arrdir == left){
       $slideCtn.animate({
         left: "+=250"
       });
    }
});