Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

carouFredSel: Show partial items?

I'm using carouFredSel to create a vertical carousel. Everything works great, except I would prefer if partial items would be shown at the bottom, cropped, rather than being hidden. This way it would indicate to users that there are additional items that can be scrolled.

I have been reading the documentation, but so far can't tell if what I am after is possible.

Check out the JSFiddle to see what I mean. Watch the bottom most item on the page.

Javascript

$("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"
    }
});​
like image 584
colindunn Avatar asked Mar 02 '12 16:03

colindunn


2 Answers

This is a bit of a hack, but it works. Set the height of the scroller (in this case, ul) to 150% and the parent element (in this case, body) to overflow: hidden. Now the bottom most element is off screen.

Javascript

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

CSS

body {
    overflow: hidden;
    }
like image 98
colindunn Avatar answered Oct 21 '22 12:10

colindunn


Ha, caroufredsel supports it, no hacks required :))! You can achieve it with the following option:

items: {
    visible: '+1'
}

EDIT: This suffers from a problem though. If number of whole visible items + 1 == number of all items, then carousel cannot be scrolled even though one image is visible just partially. You can overcome this issue by setting e.g. minimum: 1 but it is not always a way to go (e.g. if number of images is dynamic and you don't want scroll handlers to appear when there is just one or two images.).

like image 1
clime Avatar answered Oct 21 '22 10:10

clime