Vertical fixed height carousel items not showing correctly

[khromov]

There seems to be an small issue with using a vertical carousel with fixed height and a limited number of items.

Here is a demo page: https://dl.dropboxusercontent.com/u/2758854/carouFredSel-6.2.1/carouFredSel-6.2.1/index.html

Every slider item in that page starts with the word START written in red. As we load the page we can see that the first item is actually cut in half, and only half the text is readable.

Here is a screenshot as well: https://dl.dropboxusercontent.com/u/2758854/item-cut.png

I think it's because you can't actually fit 4 items on the first screen. (which is the "visible" setting)

Using visible: "variable" does go a long way of solving this. But perhaps there could be an alternative to say "show X items, but if they don't fit, remove one and vertically center the remaining X-1 items"

Hope that makes sense, thanks for a great plugin!

Here is the full config:

$("#foo3").carouFredSel({
    height: 450,
    direction: "up",
    items: {
        visible: 4,
        //start: "random",
        height: "variable"
    },
    scroll: {
        items: 1,
        pauseOnHover: true
    },
    auto: 5000
});

[ghost]

Thanks, this comment partially fixed my problems with this carousel. I have a problem with the images not displaying in Safari. They're fine in Firefox and Chrome... but safari only shows the tops of the images until they begin scrolling. If I set a size on start, that messes with the responsive stuff, i.e the variable heights. Already spent all morning trying to fix this!

[pizzle1983]

I have a similar problem to RayanZenner, Safari shows just the tops of images, and as soon as you touch the size of the browser it works out the height the carousel should be displaying at. I'll let you know if I find any solutions.

[ghost]

Hey, I found a solution to this, though I don't know if it's good practice. I just changed from $(document).ready to $(window).load and that fixed it:

See code:

$(window).load(function() { // Using custom configuration $('#sl-carousel').carouFredSel({ circular : true, responsive : true, items : 3, direction : "left", scroll : { items : 1, easing : "swing", duration : 800, pauseOnHover : true, event : "click", },
items : { visible : 3, height : "variable" }, prev: { button : "#sl-carousel_prev",
key : "left" }, next: { button : "#sl-carousel_next", key : "right"
}
}); });

[pizzle1983]

Thanks for this. It does seem to have solved the problem my side too. Reading around, people are suggesting that image data isn't ready at the time document.ready fires, but is by the time window.load fires. If that is true, then it only really seems to be a problem with webkit browsers.

[makani-ph]

Hi, i have a similar problem with 2 caroufredsel implementations on my website http://castabo.rawdesk.be In my case the images are not shown at all. Instead a circled egg timer is running instead. Scale : iOS (phone and pad) - Android (only phone). A short flv video capture can be seen here : http://castabo.rawdesk.be/temp/caroufredsel.flv This website runs on Aquiathemes Aura theme : http://demo.aquiathemes.net/aura/home/v7 (demo)

Can anyone point me out where to look ? This seems different then the symptoms described above.

[makani-ph]

I would like to add, this caroufredsel implementation seems to work correctly on iOS when ran from Aquia's demo page here : http://demo.aquiathemes.net/aura/shortcodes/carousel

[makani-ph]

Hi, my carousel issue was solved today by theme master @Acquiathemes.com

[rpcarnell]

I have an issue with carouFredSel: the figure and

are not properly center on the iPhone/iPod and Google Chrome. The image is bigger than the screen resolution. When I rotate the iPod, the figure nad figCaption are properly centered. And when I rotate it again, it is now properly centered. It is weird.

[ghost]

@rpcarnell I suggest using Owl Carousel. With all respect to the caroufredsel developers, I found it to be buggy and was never truly able to get around the FOUC problem. Owl carousel is both responsive and works great. Just google it.