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 adds the max height of the image to the div.

When my images are 740 wide and the height is 960. it resizes the image to the responsive width to fit the screen, the image is also rescaled to fit the width but the div seems to still think theres an image with the height of 960.

How do i resolve this issue?

Answer 1

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 2

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 3

$('#foo2').carouFredSel({
      responsive: true,
      auto: true,
      width: "100%",
      height: "100%",
      scroll: 3,
      prev: '#prev4',
      next: '#next4',
      items: {
        width: '100%',
        height: '100%'
      }
    }).trigger('resize');

Answer 4

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 5

http://caroufredsel.dev7studios.com/examples/responsive-carousels.php the trick is to make the width and height inside items.

$("#foo2").carouFredSel({
    responsive  : true,
    scroll      : {
        fx          : "crossfade"
    },
    items       : {
        visible     : 1,
        width       : 870,
        height      : "46%"
    }
});

Greetings Lars

Answer 6

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