??? ?? ???? ??

? ????? Infinity-Image-Loop-? ???? ?? ???, ?? ???? ? ??? ?? ??? ?? ?? ??? ?? ?????. JavaScript/jQuery? ???? ????? ???????. ??? ?? ????? ??? ??? ?? ??? ???? ??? ??? ???.

?? ?? ???? ??

?? ??? ????? ??? ??? ?? ? ??? ??? ????. ???? ????? "n"?? ???? ????. ? ?? ???? n?? ??? ??? ?? ? ??? ??? ???????. ? ?? ???? ??? ???? ???? ???? ??? ?????.

• ? ?? ??? ?? ??? ???? ???? ?????.
• ? ?? ??? ?? ? ?? ???? ???? ?????. ??? ??????.

??? ?? ???? ?? 2?? ??? ??? ???? ???.

?? ???? ??? 100px?? ????? ?? ???? ?? ????? ?????. Hidden, display: inline-block ? white-space: nowrap? ???? ???? ?? ????? ? ?? ?? ??? ? ????.

n = 4? ?? DOM ??? ??? ????.

offset(px)     0       100     200     300     400     500
images         |   4c   |   1   |   2   |   3   |   4   |   1c
                                                   
/*                 ^^                                       ^^
       [ Clone of the last image ]              [ Clone of the 1st image ]
*/

???? ????? ??: -100px? ???? ? ?? ???? ?????. ??? ?? ????? ?? ??? CSS ??? JavaScript ?????? ?????.

• ????? 4?? ???? ?? ? ??? 1c? ???? ??? 4?? 1c? ?????? ?????. ?????? ???? ? ?? ???? ?? ????? ???? ?? ??? ?? ?????(?: ???? ??: ????? -100px).
• ????? ????? ? ?? ??? ????, ??? 1?? 4c?? ?? ?????? ???? ????? 4?? ??? ???(??: ?????? -400px)?? ???? ?? ???? ????? ?????.

???? ?? ??

?? ???? ????? ? ??? ?????. ??? ??? ?? JavaScript/jQuery ?????.

$(function() {
 
  var gallery = $('#gallery ul'),
      items   = gallery.find('li'),
      len     = items.length,
      current = 1,  /* the item we're currently looking */
      
      first   = items.filter(':first'),
      last    = items.filter(':last'),
      
      triggers = $('button');
  
  /* 1. Cloning first and last item */
  first.before(last.clone(true)); 
  last.after(first.clone(true)); 
  
  /* 2. Set button handlers */
  triggers.on('click', function() {

    var cycle, delta;
    
    if (gallery.is(':not(:animated)')) {
     
        cycle = false;
        delta = (this.id === "prev")? -1 : 1;
        /* in the example buttons have id "prev" or "next" */  
    
        gallery.animate({ left: "+=" + (-100 * delta) }, function() {
      
            current += delta;
       
            /** 
             * we're cycling the slider when the the value of "current" 
             * variable (after increment/decrement) is 0 or when it exceeds
             * the initial gallery length
             */          
            cycle = (current === 0 || current > len);
       
            if (cycle) {
                /* we switched from image 1 to 4-cloned or 
                   from image 4 to 1-cloned */
                current = (current === 0)? len : 1; 
                gallery.css({left:  -100 * current });
            }
        });   
     }
    
  });
});

??

? ???? ????? ???? ?????, ? ???? ?? ? ?? ?? DOM ?? ??? ??? ?? ?? ??? ?????. -?? ????.

?? ?? ??? ?? ? ??? ? ??? ?? ?? ????? ???? ?? ????? ???? ???? ?????.

? ??? JavaScript/jQuery? ???? ?? ??? ?? ????? ??? ?? ? ????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!