Jquery 导航按钮水平循环功能

我有一个截面元素，它的宽度是窗口宽度的5倍。它通过循环功能向左滑动1个窗口宽度。这是非常好的工作，但我想要两个箭头按钮，这样用户可以互动，并决定他想看到什么。如何使用jQuery创建这些按钮

以下是我的HTML代码：

<a href="#" id="left"></a>
<a href="#" id="right"></a>
<section>
    <article id="a1">
        ...
    </article>

    <article id="a2">
        ...
    </article>

    <article id="a3">
        ...
    </article>
</section>

---

如何制作这些按钮，以便当我单击“左”按钮时，section元素将返回到上一篇文章？

我认为您最好在活动的

文章中添加一个新的类
活动的

var breedte = $(window).width();
function animateSection() {
    var current = $('article.active').removeClass('active');
    var prev = current.prev();
    var next = current.next().addClass('active');
    $(current).animate({ marginLeft: (-$(window).width()) }, 1000);
    $(next).css({ marginLeft: ($(window).width()) }).animate({marginLeft: 0 }, 1000);
}
$('article').first().addClass('active');
setInterval(animateSection,5000);

“上一篇”和“下一篇”按钮将调用
animateSection
相应地为下一篇文章设置动画。我希望这是一个良好的起点

var breedte = $(window).width();
function animateSection() {
    var current = $('article.active').removeClass('active');
    var prev = current.prev();
    var next = current.next().addClass('active');
    $(current).animate({ marginLeft: (-$(window).width()) }, 1000);
    $(next).css({ marginLeft: ($(window).width()) }).animate({marginLeft: 0 }, 1000);
}
$('article').first().addClass('active');
setInterval(animateSection,5000);