carouFredSel - set visible amount to actual amount of images - and still scroll?

Question

I'm working with this scroller

http://coolcarousels.frebsite.nl/c/2/

I have this setup below.

My issue is I have it set to visible: 4 and I have 4 images, so it doesn't scroll. If I set it to visible: 3 then it works as expected. But I want to show all 4 images in one screen when you open the browser full width on a 1920px wide resolution. So the issue seems to be. If I set visible to the amount of images I have then it stops working.

Is there a way to have all 4 images on screen at one time then still scroll through them?

$(function() {
    $('#carousel').carouFredSel({

        width: '100%',  
        align: 'left',

        items: {
            visible: 4,
            start: 0,


        },
        scroll: {
            items: 1,
            queue           : true,
            fx: "scroll",
            easing: "swing",
            duration: 1000,
            timeoutDuration: 3000
        },

        prev: '.prev',
        next: '.next',


        auto: {
            easing: "quadratic",
            button: '.play',

            pauseOnEvent: 'resume',
                pauseOnHover: true
        }

    }).find(".slide .plusNav").hover(
              function() { $(this).find("div").slideDown(); },
              function() { $(this).find("div").slideUp();   }
    );
});

+1 I'm wondering the same thing. – Corey Feb 27 '13 at 18:15 — Corey, Feb 27 '13 at 18:15
Hacked a fix, check the answer below. – Corey Feb 27 '13 at 18:56 — Corey, Feb 27 '13 at 18:56
How many photos are you have in the entire carosel? – Ignacio Correia Mar 20 '13 at 09:48 — Ignacio Correia, Mar 20 '13 at 09:48

score 7 · Answer 1 · answered Mar 18 '13 at 22:10

7

try this

items: {
    minimum: 0,
},

answered Mar 18 '13 at 22:10

zohei

71
5

score 0 · Answer 2 · edited Aug 14 '16 at 17:16

I have resolved this issue by setting minimum to 0.

items: {
    minimum: 0,

Actually, setting the minimum attribute to zero forces the scroll bar to be displayed always irrespective of number of items currently displayed.

This was required for me because, automatic enabling of scroll bars was not working on certain screen resolutions- I had to add 2 more items to make the scroll bar visible which was not the expected behavior.

As a work around, I set minimum: 0 - it resolved the issue.

score -1 · Answer 3 · answered Feb 27 '13 at 18:53

I was able to do this by editing the source :/

If you comment out this lines 554 & 556 in jquery.carouFredSel-6.2.0.js like this...

//  not enough items
var minimum = (is_number(opts.items.minimum)) ? opts.items.minimum : opts.items.visible + 1;
if (minimum > itms.total)
{
    // e.stopImmediatePropagation();
    // return debug(conf, 'Not enough items ('+itms.total+' total, '+minimum+' needed): Not scrolling.');
}

...it worked for me.

score -1 · Answer 4 · answered Apr 17 '13 at 14:32

Access the wrapper and set its height (assuming all children have the same height):

var carousel = [your_carousel],
    carousel_wrapper = carousel.parent();

carousel_wrapper.height(function(){
  return (carousel.children('[child_selector]').length) * [child_height];
});

The thing here is, there will be a weird behavior when the carousel animates. This is because the maximum height was done ((n-1) * child_height) intentionally as a mask, along with an overflow: hidden.

Another option would be to duplicate one of the children, but that isn't semantic.

carouFredSel - set visible amount to actual amount of images - and still scroll?

4 Answers4