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"
    }
});​

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"
    }
});​

• javascript
• jquery
• html
• css
• caroufredsel

• It looks like that defeats the whole purpose of this type of carousel. Other plugins require that all slides be the same size; then you can alter the viewport size to get a partial view of the next slide. With yours, it seems to be dynamic ("smart") enough to intentionally avoid this. And I don't see any configurable option that allows you to do what you want. Try jCarousel or jCarousel Lite if you want options to partially reveal the next slide. Note, the former has a circular bug. – Sparky Commented Mar 2, 2012 at 16:36
• That's a good point. And in some instances, that would be desirable. In this case, I think it's undesirable. And I would use another plugin, but this plugin handles a lot of other things really well that others don't. – colindunn Commented Mar 2, 2012 at 16:41
• I'm looking again at the options... I don't think it's possible with this plugin. And it's definitely going to be very difficult if all the slides are different sizes... this means that the viewport size would have to constantly change. Fred dynamically changes the viewport but the other plugins will not. I think your best bet would be to make all slides the same size, as your goal is slightly more attainable with that starting point. – Sparky Commented Mar 2, 2012 at 16:45
• @Sparky: it is possible :).Look at my answer. – clime Commented Oct 12, 2013 at 23:16
• @clime, that's great that the plugin now has that option. I wonder if that was also the case for the version I was looking at 18 months ago. – Sparky Commented Oct 13, 2013 at 1:05

3 Answers 3

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;
    }

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 overe 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.).

The next not visible element in the vertical carousel is pushed down by the margin. I'm currently overriding it by the following function:

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

The downside of it that you will have to call this function on carousel init and on up and down events. But it works ;)