jQuery滑块在末尾动态停止或附加li项以继续

我正在尝试通过单击箭头让一个jQuery函数左右滑动li项目。我正在使用一个名为TinyCarousel.js的jQuery脚本。当我让它正常运行时，它会继续向右滚动，直到最后一个 li 项目处于第一个位置。我目前拥有的内容可以在主滑块下的"当前测试或发布的游戏"部分看到。如果您一直向右滚动，您会注意到问题。

有没有可能...

1）更改jQuery以使最后一个li项目在窗口右侧完全显示后停止？我知道这必须相对于浏览器窗口大小，并且如果窗口大小显示部分项目，则进行一次部分移动。我也知道我必须知道我可以在 php 中执行的 li 项目的数量。

2）或两个，不断附加li，以便滑块似乎永远不会结束。只是一遍又一遍地重复继续？我猜我需要不断附加 li 项目，如果它们不在屏幕外，则需要删除它们。

我试图创建一个 jFiddle 来显示问题。但它在 jFiddle 上做了一些不同的事情，这更接近我需要的。它似乎在某个时候停止向右移动。但它不需要整个最后的 li 才能完全显示。它与我在实时站点上停止的功能有何不同？

任何帮助将不胜感激。我确实搜索并找到了这个，但在这种情况下似乎不起作用。谢谢你。

我正在使用jQuery 1.10.2，php 5.4，TinyCarousel.js版本1.9

这是我目前拥有的。CSS的

.PrevArrow {
    width: 5%;
    float: left;
    margin-top: 20px;
}
.NextArrow {
    width: 5%;
    float: right;
    margin-top: 20px;
}
.ListImage img {
    margin-top: 5px;
    margin-bottom: 10px;
}
#slider-code .viewport {
    float: left;
    width:90%;
    height: 95px;
    overflow: hidden;
    position: relative;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
}
#slider-code .buttons {
    display: block;
    margin: 0px 10px 0 10px;
    float: left;
}
#TickHead {
    margin-top: 3px;
}
#slider-code .prev {
    margin: 0 10px 0 10px;
}
#slider-code .next {
    margin: 0 10px 0 10px;
}
#slider-code .disable {
    visibility: hidden;
}
#slider-code .overview {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    left: 0;
    top: 0;
}
.TestingTickerText {
    vertical-align: top;
    color: #666666;
    font-family:'Open Sans', "lucida grande", tahoma, verdana, arial, sans-serif;
    font-size: 10px;
}
#slider-code .overview li {
    float: left;
    margin: 0 20px 0 0;
    padding: 1px;
    height: 65px;
    width: 105px;
    left: 0;
}
#slider-code .pager {
    overflow:hidden;
    list-style: none;
    clear: both;
    margin: 0 0 0 45px;
}
#slider-code .pager li {
    float: left;
}
#slider-code .pagenum {
    text-decoration: none;
    text-align: center;
    padding: 5px;
    color: #555555;
    font-size: 14px;
    font-weight: bold;
    display: block;
}
#slider-code .active {
    color: #fff;
}

该 php

<div id="slider-code">
    <div class="PrevArrow">
        <a href="#" class="prev"><img src="Link to Left Arrow"/></a>
    </div>
    <div class="viewport">
        <ul class="overview">
             <li>Item 1</li>
             <li>Item 2</li>
             <li>Item 3</li>
             etc...
        </ul>
    </div>
    <div class="NextArrow">
        <a href="#" class="next"><img src="Link to Right Arrow"/></a>
    </div>';
<center>
        <span id="TickHead" class="cat_bg2">Games Currently Testing or Releasing</span>
    </center>
</div>

jQuery

(function ($) {
    $(document).ready(function(){               
        $('#slider-code').tinycarousel({ display: 1});
    });
}(jQuery));

$(document).ready(function(){
    $('.arrowbutton').click(function(){
        $('.imageslider').append('.image');
    });
});