¿Cómo hacer un control deslizante img deslizante sin fin?

Question

Casi he terminado un sitio web para un cliente en el trabajo, que tiene un control deslizante dinámico ancho completo en la página de inicio. Como dieron pocas especificaciones, actualmente el control deslizante es muy básico; simplemente se desplaza de izquierda a derecha cambiando la propiedad CSS izquierda en el UL. Obviamente, debido a esto, se desplazará repentinamente de regreso al principio una vez que llegue al final, lo que los clientes aparentemente no desean.

No soy un experto con jQuery, y me preguntaba cómo podría cambiar fácilmente este control deslizante para que se mueva sin fin en su lugar.

También utiliza una navegación simple, tiene cuatro diapositivas, y tiene una pequeña barra de controles en la parte inferior con el título de cada uno para saltar rápidamente a diapositivas específicas. También tiene una flecha que sigue la última diapositiva.

He encontrado soluciones para hacerlo circular, pero no puedo ver ninguna que se vea compatible con la navegación. Realmente me gustaría no tener que empezar de nuevo desde el principio, ¿será posible?

Aquí está todo el código que estoy usando actualmente, si desea el CSS, también puedo publicarlo, pero no creí que fuera demasiado necesario.

Gracias mucho por adelantado.

EDIT: jsFiddle Resultado

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

http://jsfiddle.net/hCXhZ/5/

Es posible que necesite para hacer más grande la sección de resultados para compensar la CSS sensible. Acabo de vincular la hoja de estilo como me sentía perezoso, y no podía ser arsed para encontrar todas las secciones del archivo ...

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> 

Answer 1

arregló para hazlo funcionar usando una secuencia de comandos que se encuentra aquí: http://www.queness.com/post/923/create-a-simple-infinite-carousel-with-jquery

Aunque esto tenía el efecto deseado de un control deslizante de desplazamiento infinito, no pude encontrar la manera de hacer saltar a na La vinificación funciona correctamente, lo que me quitó bastante de la estética del sitio en mi opinión ... Pero, ¿qué pasa, el cliente siempre tiene la razón, eh?

$(function() { 

    //rotation speed and timer 
    var speed = 5000; 
    var run = setInterval('rotate()', speed); 

    //grab the width and calculate left value\ 
    var screenWidth = $(window).width(); 
    $("ul.slides li").css("width",screenWidth); 
    $("ul.slides li").width(screenWidth); 
    var fullWidth = $('ul.slides li').size() * $('ul.slides li').width(); 
    $('ul.slides').css('width', fullWidth); 


    var item_width = $('ul.slides li').width(); 
    var left_value = item_width * (-1); 

    //move the last item before first item, just in case user click prev button 
    $('ul.slides li:first').before($('ul.slides li:last')); 
    $('ul.slides li:first').before($('ul.slides li:last')); 

    //set the default item to the correct position 
    $('ul.slides').css({'left' : left_value}); 

    //if user clicked on prev button 
    $('a.controls.left').click(function() { 

     //get the right position    
     var left_indent = parseInt($('ul.slides').css('left')) + item_width; 

     //slide the item    
     $('ul.slides').animate({'left' : left_indent}, 1000,function(){  

      //move the last item and put it as first item    
      $('ul.slides li:first').before($('ul.slides li:last'));   

      //set the default item to correct position 
      $('ul.slides').css({'left' : left_value}); 

     }); 

     //cancel the link behavior    
     return false; 

    }); 


    //if user clicked on next button 
    $('a.controls.right').click(function() { 

     //get the right position 
     var left_indent = parseInt($('ul.slides').css('left')) - item_width; 

     //slide the item 
     $('ul.slides').animate({'left' : left_indent}, 1000, function() { 

      //move the first item and put it as last item 
      $('ul.slides li:last').after($('ul.slides li:first'));     

      //set the default item to correct position 
      $('ul.slides').css({'left' : left_value}); 

     }); 

     //cancel the link behavior 
     return false; 

    });   

    //if mouse hover, pause the auto rotation, otherwise rotate it 
    $('ul.slides').hover(

     function() { 
      clearInterval(run); 
     }, 
     function() { 
      run = setInterval('rotate()', speed); 
     } 
    ); 

}); 


//a simple function to click next link 
//a timer will call this function, and the rotation will begin :) 
function rotate() { 
    var item_width = $('ul.slides li').width(); 
    var left_value = item_width * (-1); 

     //get the right position 
     var left_indent = parseInt($('ul.slides').css('left')) - item_width; 

     //slide the item 
     $('ul.slides').animate({'left' : left_indent}, 1000, function() { 

      //move the first item and put it as last item 
      $('ul.slides li:last').after($('ul.slides li:first'));     

      //set the default item to correct position 
      $('ul.slides').css({'left' : left_value}); 

     }); 
}