carouFredSel : 부분 항목을 표시 하시겠습니까?

Question

나는 수직 컨베이어를 만들기 위해 carouFredSel을 사용하고 있습니다. 모든 항목이 훌륭하게 작동합니다. 단, 부분 항목이 숨겨지기보다는 자르기 부분에 표시되는 경우를 선호합니다. 이렇게하면 스크롤 할 수있는 추가 항목이 있음을 사용자에게 알릴 수 있습니다.

나는 documentation을 읽고 있었지만, 지금까지 내가 할 수있는 일이 무엇인지 알 수 없다.

Check out the JSFiddle to see what I mean. 페이지의 맨 아래 항목을보십시오.

자바 스크립트

$("ul").carouFredSel({ 
    direction: "up", 
    align: "top", 
    width: 100, 
    height: "100%", 
    items: { 
     visible: "variable", 
     width: 100, 
     height: "variable" 
    }, 
    scroll: { 
     items: 1, 
     mousewheel: true, 
     easing: "swing", 
     duration: 500 
    }, 
    auto: false, 
    prev: { 
     button: ".prev", 
     key: "up" 
    }, 
    next: { 
     button: ".next", 
     key: "down" 
    } 
});​ 

Answer 1

이 해킹의 비트이지만, 그것을 작동합니다. 스크롤러 (이 경우 ul)의 높이를 150 %로 설정하고 상위 요소 (이 경우 body)를 overflow: hidden으로 설정합니다. 이제 가장 아래쪽에있는 요소가 화면을 벗어납니다.

자바 스크립트 수직 회전 목마의 다음 보이지 요소가 마진에 의해 아래로 밀어

body { 
    overflow: hidden; 
    } 

Answer 2

$("ul").carouFredSel({ 
    height: "150%" 
}); 

CSS. 나는 현재 다음과 같은 기능에 의해 그것을 무시 해요 :

function cropCarousel() { 
    var visibleElements = this.triggerHandler("currentVisible"), // show all visible 
    $lastElement = $(visibleElements[visibleElements.length - 1]); // get the last one 

    $lastElement.css('margin-bottom', '30px'); // amend the margin 
}; 

cropCarousel.call($('#your_carousel_id')); 

당신이 및 이벤트 아래에이 회전 목마 초기화에 기능을 호출해야합니다 그것의 단점을. 하지만 작동합니다;)

Answer 3

하, caroufredsel, 아니 해킹이 필요하지 않습니다 :) :)! 다음 옵션을 사용하여이를 달성 할 수 있습니다.

items: { 
    visible: '+1' 
} 

편집 : 이것은 문제가 있습니다. 전체 보이는 항목의 수 + 1 == 모든 항목의 수이면 한 이미지가 부분적으로 표시 되더라도 회전식을 스크롤 할 수 없습니다. 예를 들어 다음과 같이 설정하여이 문제를 극복 할 수 있습니다. minimum: 1하지만 항상 이동할 수있는 것은 아닙니다 (예 : 이미지 수가 동적 인 경우 한두 개의 이미지가있을 때 스크롤 핸들러가 나타나지 않게하려는 경우).