Buggy jQuery <div> slider

Question

我正在尝试使用HTML，CSS和jQuery构建div滑块（我还没有很好的知识）。

问题在于，当我无法显示第三个div时，以及当我执行时（代码中有一些更改），它无法转到上一张幻灯片。

请帮我解释一下代码。对于一些杂乱而奇怪的语法感到抱歉，我仍然不太擅长它。

滑块的jQuery代码：

$(function () {
    $('a.scroll').on('click', function (event) {
        event.preventDefault();

        var $anchor = $(this),
        $section = $anchor.attr('data-section');

        if ($section === '4' || $section === '2' || $section === '3') {
          $('#wrap .wrap-inner').addClass('goto-' + $section);
        } else {
          $('#wrap .wrap-inner').removeClass('goto-2 goto-3');
        }
    });
});

HTML和CSS本身出现在下面的小提琴中，但是第二个例子：

<div class="section" id="section2">
    <div class="arrowDiv"><a class="scroll" href="#section1" data-section="1"><img class="white"src="imgs/go_back.png" /></a>
    </div>
    <div class="form formTitle">
         <h1 class="alpha">Second</h1>
    </div>
    <div class="arrowDiv"><a class="scroll" href="#section3" data-section="3"><img class="white"src="imgs/go_next.png" /></a>
    </div>
</div>

这是我的小提琴：http://bit.ly/1cUCUF6

答案我正在寻找：如何让它显示超过2个div以及如何使每个幻灯片上的后退和下一个箭头都能正常工作。