carouFredSel: Show partial items?

Question

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

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, Mar 02 '12 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, Mar 02 '12 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, Mar 02 '12 at 16:45
@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, Oct 13 '13 at 01:05

colindunn · Accepted Answer · 2012-03-02T17:28:22.690

4

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

edited Mar 02 '12 at 17:28

answered Mar 02 '12 at 16:57

colindunn

2,879
9
43
70

Clever. But with different size slides, won't you get inconsistent results? – Sparky Mar 02 '12 at 17:12
The heights don't vary that much, and I can always increase the height of `ul` to 200% if need be. – colindunn Mar 02 '12 at 20:24
hmm, like this, the carousel may not init because it will think that there is enough space for its images when there is not in fact.. At least this happens in my case. You can "fix" it with minimum option. But that is not ideal either if you have got only a few images. I am still looking how to solve this. – clime Oct 12 '13 at 22:59

clime · Answer 2 · 2013-10-25T14:39:47.197

1

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

edited Oct 25 '13 at 14:39

answered Oct 12 '13 at 23:14

clime

7,872
8
52
80

I'm fairly certain this option wasn't available when this question was posted in early 2012. – Sparky Oct 13 '13 at 01:09

score 0 · Answer 3 · answered May 20 '13 at 10:19

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

carouFredSel: Show partial items?

3 Answers3