Как сделать бесконечную прокрутку img слайдера?

Я почти закончил веб-сайт для клиента на работе, который имеет большой динамический слайдер полной ширины на главной странице. Поскольку они дали мало спецификаций, в настоящее время слайдер очень прост; он просто прокручивается слева направо, изменяя свойство Left CSS на UL. Очевидно, из-за этого он будет прокручиваться внезапно назад к началу, как только он достигнет конца, чего клиенты, по-видимому, не хотят.

Я не эксперт по jQuery, и мне было интересно, как я могу легко измените этот ползунок так, чтобы он прокручивался бесконечно.

Он также использует простую навигацию, он имеет четыре слайда и имеет небольшую панель управления в нижней части с названием каждого на нем, чтобы быстро перейти к конкретным слайдам. Он также имеет стрелку, которая следует за последним слайдом.

Я нашел решения, чтобы сделать его петлей, но я не вижу ни одного, который выглядел бы совместимым с навигацией. Мне бы очень не хотелось начинать все сначала, не так ли возможно?

Вот весь код, который я в настоящее время использую, если вам нравится CSS, я могу опубликовать его тоже, но я не думаю, что это было слишком необходимо.

Заранее большое спасибо.

EDIT: jsfiddle Result

Http://jsfiddle.net/hCXhZ/5/embedded/result/

Http://jsfiddle.net/hCXhZ/5/

Возможно, вам потребуется увеличить раздел результатов, чтобы компенсировать адаптивный CSS. Я просто связал таблицу стилей, так как чувствовал себя ленивым, и не мог будь проклят, чтобы найти все разделы в файле...

JQuery

$(function(){ 

    var screenWidth = $(window).width();

    $("ul.slides li").css("width",screenWidth);



    $(window).resize(function() {

        var SlideWidth = $("ul.slides li").width();

        var screenWidth = $(window).width();

        $("ul.slides li").css("width",screenWidth);

    });







    $('.slider-controls li').click(function(){

        var slideToID = $(this).children().attr('rel');

        var SlideWidth = $("ul.slides li").width();

        var slideTo = (slideToID * SlideWidth) - SlideWidth;

        var arrowTo = 85+(240*(slideToID-1));





        $('.slider-controls li').removeClass('active');

        $(this).addClass('active');

        $('ul.slides').animate({"left": -slideTo});

        $('div.slider-arrow').animate({"left": arrowTo});

    });



});



function slider() {



    var SlideWidth = $("ul.slides li").width();

    var SlideCount = $("ul.slides li").size();

    var TotalWidth = SlideWidth * SlideCount;

    var StopPos = TotalWidth - SlideWidth;

    var CurPos  = $("ul.slides").position().left;





    if (CurPos <= -StopPos) {

        $("ul.slides").animate({"left": "0"});

    }

    if (CurPos > -StopPos) {

        $("ul.slides").animate({"left": "-="+SlideWidth+"px"});

    }



    var slideId = (-CurPos + SlideWidth) / SlideWidth;

    var fSlideId = slideId + 1;

        var arrowTo = 85+(240*(fSlideId-1));



    $('.slider-controls li').removeClass('active');

        if (fSlideId < 5) {

            $('.slider-controls li.slide'+fSlideId+'').addClass('active');

            $('div.slider-arrow').animate({"left": arrowTo});

        }

        if (fSlideId == 5) {

            $('.slider-controls li.slide1').addClass('active');

            $('div.slider-arrow').animate({"left": 85});



        }

};



$(function(){ 

    var SlideWidth = $("ul.slides li").width();

    var SlideCount = $("ul.slides li").size();

    var TotalWidth = SlideWidth * SlideCount;

    var StopPos = TotalWidth - SlideWidth;

    var CurPos  = $("ul.slides").position().left;





    timeout = setInterval('slider()', 6000);



    $(window).width();



    $("ul.slides").css("width",TotalWidth);





    $(".controls .leftarrow").click(function() {

    var CurPos  = $("ul.slides").position().left;

        if (CurPos >= 0){

            $("ul.slides").animate({"left": "-"+StopPos})

        }

        if (CurPos < 0){

            $("ul.slides").animate({"left": "+="+SlideWidth+"px"})

        }

    });



    $(".controls .rightarrow").click(function() {

    var CurPos  = $("ul.slides").position().left;



        if (CurPos <= -StopPos) {

            $("ul.slides").animate({"left": "0"})

        }

        if (CurPos > -StopPos) {

            $("ul.slides").animate({"left": "-=" + SlideWidth + "px"})

        }

    });



    $(".slider-controls").hover(

      function () {

        clearInterval(timeout);

      }, 

      function () {

        timeout = setInterval('slider()', 4000);

      }

    );



});

HTML

 <div id="slider">

    <ul class="slides">

                                            <li style="background-image: url(http://ethercreative.net/npseymour/wp-content/uploads/2012/06/Innovation.jpeg);">

                            <div class="container_12">

                    <div class="grid_12">

                        <h1 class="title">Modern Innovation</h1>

                        <p>                     <a href=""></a></p>

                    </div>

                </div>

            </li>                               

                                            <li style="background-image: url(http://ethercreative.net/npseymour/wp-content/uploads/2012/06/specialist-equipment.jpg);">

                            <div class="container_12">

                    <div class="grid_12">

                        <h1 class="title">Specialist Equipment</h1>

                        <p>NP Seymour have a range of packhouse and grading equipment 

<br />                      <a href="http://www.google.com">Click here to view our products</a></p>

                    </div>

                </div>

            </li>                               

                                            <li style="background-image: url(http://ethercreative.net/npseymour/wp-content/uploads/2012/06/Home-Page-slider-3.jpeg);">

                            <div class="container_12">

                    <div class="grid_12">

                        <h1 class="title">Service and quality</h1>

                        <p>Purveyors of high quality, extremely useful Agricultural Machinery and accessories.<br />                        <a href="http://www.google.com/">Click here to view our products</a></p>

                    </div>

                </div>

            </li>                               

                                            <li style="background-image: url(http://ethercreative.net/npseymour/wp-content/uploads/2012/06/slide-11.jpg);">

                            <div class="container_12">

                    <div class="grid_12">

                        <h1 class="title">Latest Technology</h1>

                        <p>We specialise in orchard, vineyard and hop machinery<br />                       <a href="http://www.google.com">Click here to view our products</a></p>

                    </div>

                </div>

            </li>                               

            </ul>

 </div>

 <div class="slider-controls">

    <ul class="container_12">

        <div class="slider-arrow"></div>



        <li class="alpha active slide1 grid_3">

            <a href="javascript:;" rel="1">Modern Innovation</a>

        </li>



        <li class="slide2 grid_3">

            <a href="javascript:;" rel="2">Specialist Equipment</a>

        </li>



        <li class="slide3 grid_3">

            <a href="javascript:;" rel="3">Service and quality</a>

        </li>



        <li class=" omega slide4 grid_3">

            <a href="javascript:;" rel="4">Latest Technology</a>

        </li>



    </ul>

 </div>