jquery carousel 한 번에 하나의 img로 이동합니다.

Question

이미지 회전식 캐 러셀을 만들려고하는데 스크롤 버튼을 누르면 한 번에 여러 이미지가 프레임 밖으로 이동합니다. 한 번에 하나의 이미지 만 스크롤하는 것이 좋습니다. 여기

는 작업 fiddle

입니다 그리고 여기 당신이 1이기 위하여 visible 변수를 변경하면 당신이 원하는만큼 다음 작동합니다

$.fn.infiniteCarousel = function() { 

function repeat(str, num) { 
    return new Array(num + 1).join(str); 
} 

return this.each(function() { 
    var $wrapper = $('> div', this).css('overflow', 'hidden'), 
     $slider = $wrapper.find('> ul'), 
     $items = $slider.find('> li'), 
     $single = $items.filter(':first'), 

     singleWidth = $single.outerWidth(), 
     visible = Math.ceil($wrapper.innerWidth()/singleWidth), // note: doesn't include padding or border 
     currentPage = 1, 
     pages = Math.ceil($items.length/visible);    


    // 1. Pad so that 'visible' number will always be seen, otherwise create empty items 
    if (($items.length % visible) != 0) { 
     $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible))); 
     $items = $slider.find('> li'); 
    } 

    // 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first 
    $items.filter(':first').before($items.slice(- visible).clone().addClass('cloned')); 
    $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned')); 
    $items = $slider.find('> li'); // reselect 

    // 3. Set the left position to the first 'real' item 
    $wrapper.scrollLeft(singleWidth * visible); 

    // 4. paging function 
    function gotoPage(page) { 
     var dir = page < currentPage ? -1 : 1, 
      n = Math.abs(currentPage - page), 
      left = singleWidth * dir * visible * n; 

     $wrapper.filter(':not(:animated)').animate({ 
      scrollLeft : '+=' + left 
     }, 500, function() { 
      if (page == 0) { 
       $wrapper.scrollLeft(singleWidth * visible * pages); 
       page = pages; 
      } else if (page > pages) { 
       $wrapper.scrollLeft(singleWidth * visible); 
       // reset back to start position 
       page = 1; 
      } 

      currentPage = page; 
     });     

     return false; 
    } 

    $wrapper.after('<a class="arrow back">&lt;</a><a class="arrow forward">&gt;</a>'); 

    // 5. Bind to the forward and back buttons 
    $('a.back', this).click(function() { 
     return gotoPage(currentPage - 1);     
    }); 

    $('a.forward', this).click(function() { 
     return gotoPage(currentPage + 1); 
    }); 

    // create a public interface to move to a specific page 
    $(this).bind('goto', function (event, page) { 
     gotoPage(page); 
    }); 
}); 
}; 

$(document).ready(function() { 
    $('.infiniteCarousel').infiniteCarousel(); 
}); 

Answer 1

스크립트입니다 :

Example

에게

또는이 코드를 사용할 수 있습니다. scrollAmount의 추가 변수를 추가했습니다. 이 코드에 1 점 이전

Example with scrollAmount variable

Answer 2

변경 (이 글은 별도의 항목을 추가 할 때)들 페이지의 끝에 더 나은 전환을 제공합니다

return this.each(function() { 
    var $wrapper = $('> div', this).css('overflow', 'hidden'), 
     $slider = $wrapper.find('> ul'), 
     $items = $slider.find('> li'), 
     $single = $items.filter(':first'), 

     singleWidth = $single.outerWidth()/3, 
     visible = Math.ceil($wrapper.innerWidth()/singleWidth)/3, // note: doesn't include padding or border 
     currentPage = 1, 
     pages = Math.ceil($items.length*3/visible);    


    // 1. Pad so that 'visible' number will always be seen, otherwise create empty items