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 पर सेट करें। अब नीचे सबसे अधिक तत्व स्क्रीन बंद है।

जावास्क्रिप्ट

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

सीएसएस

body { 
    overflow: hidden; 
    } 

Answer 2

खड़ी हिंडोला में अगले नहीं दिखाई तत्व अंतर से नीचे धक्का दे दिया गया है। मैं वर्तमान में निम्नलिखित समारोह से यह अधिभावी कर रहा हूँ:

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')); 

इसके बारे में नकारात्मक पक्ष यह है आप हिंडोला init पर इस समारोह और पर और घटनाओं नीचे कॉल करने के लिए होगा। लेकिन यह काम करता है;)

Answer 3

हा, caroufredsel इसका समर्थन करता है, कोई हैक आवश्यक :))! आप इसे निम्नलिखित विकल्प से प्राप्त कर सकते हैं:

items: { 
    visible: '+1' 
} 

संपादित करें: हालांकि यह किसी समस्या से ग्रस्त है। यदि सभी दृश्य वस्तुओं की संख्या + 1 == सभी वस्तुओं की संख्या, तो कैरोसेल को स्क्रॉल नहीं किया जा सकता है भले ही एक छवि आंशिक रूप से दिखाई दे। आप इस समस्या को उदा। minimum: 1 लेकिन यह हमेशा जाने का कोई तरीका नहीं है (उदाहरण के लिए यदि छवियों की संख्या गतिशील है और आप केवल एक या दो छवियों के दौरान स्क्रॉल हैंडलर दिखाना नहीं चाहते हैं।)।