将自定义滑块转换为无限循环

Question

Html：

<div class="container">
<div id="oCarol">
    <div class="button butLeft"> <a role="button" data-direction="left" href="#"><img alt="Goto previous slide" name="Previous" src="http://ch-harmeet.cloudapp.net/wp-content/themes/knowhow/images/left_arrow.png" /></a>

    </div>
    <div class="panel">
        <ul class="panel-inner">
            <li class="sliderDarkBg panSlide1 clearfix">1</li>
            <li class="sliderDarkBg panSlide1 clearfix">2</li>
            <li class="sliderDarkBg panSlide1 clearfix">3</li>
            <li class="sliderDarkBg panSlide1 clearfix">4</li>
            <li class="sliderDarkBg panSlide1 clearfix">5</li>
        </ul>
    </div>
    <div class="button butRight"> <a role="button" data-direction="right" href="#"><img alt="Goto Next Slide" title="Next" src="http://ch-harmeet.cloudapp.net/wp-content/themes/knowhow/images/right_arrow.png" /></a>

    </div>
</div>

问题＃1：当我尝试在第5张幻灯片后向右滚动时，它会滚动回到第一张幻灯片，无论如何都要使其成为无限循环？

问题＃2：自动滚动滑块。我已经创建了以下函数来实现这一点，有没有更好的方法呢？

function startSetInterval() {
    $('.button a:first-child').bind('trigger');
    timer = setInterval(function() { $('.button a:first-   
    child').trigger('click'); }, 5000);
}

Fiddle Link.