有關如何修復內容滑塊的上一個和下一個按鈕的建議

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