carouFredSel responsive height

Question

i am having height problems of my responsive carousel using carouFredSel.

since the images are responsive and the carousel is also set to responsive.

It still ad

Answer 1

Specifying a 100% height for both the plugin AND the items worked for me:

$('#carousel').carouFredSel({
    responsive: true,
    width: '100%',
    height: '100%',
    items: {
        height: '100%'
    }
});

Answer 2

What worked for me (even as far back as version 6.0.3 from my template):

Was setting height: 'variable' in both items AND main options like:

    $('#foo').carouFredSel({
    responsive: true,
    width: '100%',
    height: 'variable',
    items: {
        height: 'variable'
    }
});

I can resize at any point and no it longer crops the text in the DIVs etc...

Answer 3

height: "auto" means that the height of the carousel will be as height as the highest item inside including non visible items as well! In responsive mode only the height of the visible items will be changed so the height of the carousel will be still the same. (None visible items won't be changed.)

You should use height: "variable" instead which automatically resizes the carousel depending on the height of the visible items only.

More to find in the specs: http://caroufredsel.dev7studios.com/configuration.php

Hope this helps. Regards Dirch

Answer 4

I had an issue in carouFredsel 6.2.0 where the wrapper that's created updated it's height OK when given height:'variable' in the config, but the actual list of items would be stuck with the height of the first item. This then cropped off any subsequent items that were taller than the first. The updateSizes trigger didn't seem to do anything, so I solved it using the onAfter event;

scroll : {
  onAfter : function( data ) {          
    var carousel_height = $(this).parents('.caroufredsel_wrapper').css('height');
    $(this).css('height', carousel_height);
  }
 }

Answer 5

I figure it out, the caroufredsel reponsive works fine you just need to make your css of the image to be like this.

.caroufredsel_wrapper ul li img{
    height: auto;
    max-width: 100%;
    width: 100%;
}

The caroufredsel responsive functionality will just get you image height No need for jquery/javascript then thats it.

Answer 6

I've had some success in just using CSS media queries to set the dimensions of the caroufredsel_wrapper element, using !important, like this:

.caroufredsel_wrapper {
    width: 700px !important;
    height: 393px !important;
}
@media screen and (max-width: 768px){
    .caroufredsel_wrapper {
        width: 460px !important;
        height: 258px !important;
    }
}

I was then able to get rid of the onCreate stuff from the above answer. Much more performant too, as binding to the window.resize event can trigger the function many times when dragging the window frame during a single resize.