Javascript 我的自定义jQuery滑块发生了奇怪的事情

我正在设置一个非常简单的jQuery滑块，当单击向右或向左箭头时，它将在文本的3段中淡出。我遇到的问题是，在段落之间循环，它没有正确地递增。单击第一个箭头时，它会跳到第三段。然后在再次单击后重复第三段

下面是一个JSFIDLE：

基本HTML是：

<div class="textSlider">
    <div class="sliderArrow arrowLeft"><span><</span></div>

    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>

    <div class="sliderArrow arrowRight"><span>></span></div>
</div>

并隐藏除第一段以外的所有段落

$('p', '.textSlider').first().siblings('p').hide();

我试图在JSFIDLE中给出好的评论，因此这可能是了解发生了什么的最好方法，但这段代码中似乎存在问题，但我似乎无法理解发生了什么：

if (currentParagraph < numParagraphs && currentParagraph >= 0) {
     currentParagraph += direction;   
} else if (currentParagraph < 0) {
    currentParagraph = numParagraphs;
} else {
    currentParagraph = 0;
};

---

提前谢谢

我希望你不介意，但在我看来，我改变了一些更容易理解的事情：

HTML:

Javascript:

这是一个

if (currentParagraph < numParagraphs && currentParagraph >= 0) {
     currentParagraph += direction;   
} else if (currentParagraph < 0) {
    currentParagraph = numParagraphs;
} else {
    currentParagraph = 0;
};

<table align="center">
    <tr>
        <th id="backward"><span><<</span></th>
        <td class="slide-head">Paragraph 1</td>
        <td class="slide-head hidden">Paragraph 2</td>
        <td class="slide-head hidden">Paragraph 3</td>
        <!-- ... -->
        <th id="forward"><span>>></span></th>
    </tr>
</table>
<p class="content" align="center">Paragraph 1 content</p>
<div class="paragraphs hidden">Paragraph 1 content</div>
<div class="paragraphs hidden">Paragraph 2 content</div>
<div class="paragraphs hidden">Paragraph 3 content</div>
<!-- ... -->

.hidden {
    display:none;
}

table td {
    padding:0px 80px 0px 80px;
}

#forward span, #backward span {
    background-color:green;
    padding: 0px 5px 0px 5px;
}

#forward:hover span, #backward:hover span {
    font-size:17px;
}

#forward:active span, #backward:active span {
    font-size:16px;
}

$(function() {
    var headers    = (a) => $(".slide-head:eq(" + a + ")"),
        content    = $(".content"),
        paragraphs = (a) => $(".paragraphs:eq(" + a + ")"),
        curIndex   = 0;

    $("#backward, #forward").click(function() {
        headers(curIndex).addClass('hidden');
        if ($(this).attr("id") === "backward") {
            curIndex = (curIndex > 0) ? curIndex - 1 : $('.slide-head').length - 1;
        } else {
            curIndex = (curIndex < $('.slide-head').length - 1) ? curIndex + 1 : 0;
        }
        headers(curIndex).removeClass('hidden');
        content.text(paragraphs(curIndex).text());
    });
});