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?

Perhaps this will help you: http://stackoverflow.com/questions/22461244/responsive-fullscreen-caroufredsel-slideshow — Drew Baker, Mar 17 '14 at 17:34

Pierre · Accepted Answer · 2015-08-04T10:28:43.127

32

I stumbled upon this issue a while ago; the only solution I found is to resize the container when the browser is being resized. It does the trick but the pedant in me doesn't like it much.

I only made a reference to the carousel, and added the onCreate function:

var $carousel = $("#swiper");

$carousel.carouFredSel({
  width: "100%",
  height: "auto",
  responsive: true,
  auto: true,
  scroll: { items: 1, fx: 'scroll' },
  duration: 1000,
  swipe: { onTouch: true, onMouse: true },
  items: { visible: { min: 4, max: 4 } },
  onCreate: onCreate
});

function onCreate() {
  $(window).on('resize', onResize).trigger('resize');
}

function onResize() {
  // Get all the possible height values from the slides
  var heights = $carousel.children().map(function() { return $(this).height(); });
  // Find the max height and set it
  $carousel.parent().add($carousel).height(Math.max.apply(null, heights));
}

If you are still using this plugin in 2015, then it's time to move on.
The free version is no longer supported and the commercial version is now a Wordpress plugin. Plus who needs to hack a slider to make it responsive nowadays ?!

edited Aug 04 '15 at 10:28

answered Nov 01 '12 at 16:01

Pierre

17,004
4
38
61

Thanks for the temporary fix :) – nytrm Nov 01 '12 at 19:13
Thanks, have not found any other fix so i am using this. – nytrm Nov 05 '12 at 13:30
Good solution, still relevant a year later (almost at least). Only thing I changed is, in order to shorten it up a bit, instead of using `.css()` (which doesn't require `'px'` btw) I used `carousel.parent().add(carousel).height(thisHeight);`. Thanks much! – Chris Rockwell Sep 06 '13 at 17:29
this doesn't work, as this checks the first slide height, not the tallest slide's height. My 5th slide was taller, and winds up getting cut off. I discovered triggering the configuration fixes the height issue, see below. – Will Lanni May 20 '14 at 01:09
Adding this also did not help. When failed all the way, i set `height:'700px'` which is a larger value then it seems everything calculated right. Even when i resize browser, height calculated and content goes below right. But can anybody answer me quick why this happens when i do set `height:'700px'` and is there any drawbacks of this ?? – dev-m Jul 07 '14 at 15:42
No my this way not works sometimes when window resized as i saw wrapper div height sometimes goes less than ul height when resized.so i just set height of wrapper div to the height of tallest item by set size function in js file. – dev-m Jul 10 '14 at 03:04

score 24 · Answer 2 · answered Jul 25 '13 at 04:01

24

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

answered Jul 25 '13 at 04:01

hi-tech

340
2
4

adding the height to item like you have shown did the trick. I also tried changing the plugin code, but that is not good pracise – Johansrk Aug 13 '13 at 13:43
Thanks for this answer. Nice and easy. – Jarco Feb 03 '14 at 14:10
Thanks man !! add height property resolved the issue of when rotating device landscape to portrait view height not adjust. I have tested in iPhone and android device. – Jimit Shah Sep 04 '14 at 11:26

score 2 · Answer 3 · answered Sep 23 '13 at 15:41

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

score 1 · Answer 4 · answered Jun 20 '13 at 08:58

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

score 1 · Answer 5 · answered Apr 01 '19 at 21:39

No hacks, this is using the custom events in 6.2.1. After creating the slider(s) for the page, setup a window resize handler, and within that for each slider get the new height and use the 'configuration' event to reset the height of that slider. Finally trigger the 'updateSizes' event. The relevant code:

var options = {
  responsive: true,
  height: 'auto',
  onCreate: function() { jQuery(window).on('resize', resizeMyslider); },
  // remaining options
  ...
};
myslider.carouFredSel(options);

function resizeMyslider(e) {
  var newHeight = 0;
  // Get new height of items (be sure css isn't setting a fixed height)
  myslider.children().map(
    function() {
      newHeight = Math.max(newHeight, jQuery(this).height());
    }
  );
  // Change configuration of slider
  myslider.trigger('configuration', ['height', newHeight + 'px']);
  // Tell slider to use new configuration height
  myslider.trigger('updateSizes');
}

Ideally you'd implement the window resize event through a timeout or requestanimationframe, but this is the basics.

score 0 · Answer 6 · answered Dec 13 '12 at 11:59

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.

score 0 · Answer 7 · answered Feb 10 '13 at 23:16

I had this same issue and did the following:

Removed the lines from 3648 to 3652, these lines looks like:

if (is_number(o.items[o.d[dim]]))
{
    console.log(o.d[dim]);
    return o.items[o.d[dim]];
}

And this code is inside function ms_getLargestSize.

This solved the List height problem. To solve the wrapper height I changed from true to false the param at line ~3609, the line looks like:

var sz = cf_mapWrapperSizes(ms_getSizes($v, o, true), o, false);

Change to:

var sz = cf_mapWrapperSizes(ms_getSizes($v, o, false), o, false);

After this, the slider is working fine when resized and isn't cropping the elements like divs anymore!

I hope it helps, Rafael Angeline

score 0 · Answer 8 · answered Mar 01 '13 at 14:56

0

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

answered Mar 01 '13 at 14:56

Dirch

1

Setting height "variable" doesn't solve the vertical resize issue when changing browser window size. – Drew Baker Jun 06 '13 at 01:46
@DrewBaker - Please post a code sample. I encountered this same issue, solved it, and would like to see what others may have done wrong by comparison. – Zachary Schuessler Jun 07 '13 at 19:08
This helped me: This helped: http://support.dev7studios.com/discussions/caroufredsel/VR-675224 – Drew Baker Jul 12 '13 at 01:23

score 0 · Answer 9 · answered Mar 09 '13 at 22:41

0

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

answered Mar 09 '13 at 22:41

Lars Jendrzejewski

1
1
1

This only works on init, it doesn't adjust as you resize the browser window. – Drew Baker Jun 06 '13 at 01:50

score 0 · Answer 10 · answered Dec 19 '13 at 00:32

0

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

answered Dec 19 '13 at 00:32

Tim

986
6
23

score 0 · Answer 11 · edited Dec 23 '13 at 22:10

I think Lars had the right idea, if you specify a % for height and you have Responsive : true enabled you are NOT giving it a percentage of the Parent wrapper you are declaring a % ratio of Height to Width. Therefore if your slider is 1000px wide at full width and you want it 500px tall at full width setting height : "50%" will give you the correct starting height and your image will be refreshed based on page resizing.

see the code from the second example on this page http://docs.dev7studios.com/caroufredsel-old/examples/responsive-carousels.php

score 0 · Answer 12 · answered Mar 27 '14 at 00:11

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.

score 0 · Answer 13 · answered May 20 '14 at 01:12

Pierre's answer almost works, except it doesn't check for the tallest slide, it checks for the first slide's height. In my slide show, the 5th slide in was taller, and wound up getting cut off.

However, after tinkering, I found that playing with the configuration on resize forces the correct height! So, as an alternative, here's that function, turning the debug on.

var carousel = $("#swiper");

carousel.carouFredSel({
  width: "100%",
  height: "auto",
  responsive: true,
  auto: true,
  scroll: {
    items: 1,
    fx: 'scroll'
  },
  duration: 1000,
  swipe: {
    onTouch: true,
    onMouse: true
  },
  items: {
    visible: {
      min: 4,
      max: 4
    }
  },
  onCreate: function () {
    $(window).on('resize', function () {
      carousel.trigger('configuration', ['debug', false, true]);
    }).trigger('resize');
  }
});

Don't ever think that enabling debug mode in a production environment is a solution. — Pierre, Aug 04 '15 at 10:31
@Pierre Except that it was the one variable that, when changed, fixed the initial problem. —I since redeveloped the entire slideshow to calculate the first slide's height, then force following slides to resize themselves to conform, removing the need for debug being turned on. But that's an issue with the plugin. — Will Lanni, Aug 04 '15 at 23:03

John Yin · Answer 14 · 2015-02-05T05:22:16.660

My scenario is:

1) on Firefox, the images in carouFredSel carousal would be responsive, that is when we change window size, the image can be adjusted to new width and height on caroufredsel_wrapper.

2) on Chrome, the images in carousal do not show. But when we change the screen size, even a bit, the images would come out immaterially and be responsive.

var $j = jQuery.noConflict();

/**
 * Init media gallery. Init carousel. Init zoom.
 */
function initMediaGallery() {

...

$j('#prod-gal').carouFredSel({
    direction       : "left",
    responsive      : true,
    width           : "100%",
    height          : "null",
    prev            : ".slick-prev",
    next            : ".slick-next",
    items : {
        display     : "block",
        float       : "left",
        height      : "706",
        visible     : 2,
        start       : 0
    },
    scroll : {
        items : {
            visible:
            {
                min: 2,
                max: 2
            }
        },
        easing          : "swing",
        duration        : 150,
        pauseOnHover    : true
    },
    auto    :   {
        play            : false,
        timeoutDuration : 2000,
    },
    pagination: {
        container       : ".pagination",
        anchorBuilder   : false
    },

});

}

** On my understanding, the image height can be "variable" or one fixed value, like 706, in my case. it's just the initial full screen size, and when we set "responsive: ture", carouFredSel should can calculate size for all images automatically. But why this happen??

Check source code, we can see on Chrome, the .caroufredsel_wrapper height=0. Once we change the browser size a bit, it would be height=706 (for example, on my case).

I tried to use resize event (like following), to set the wrapper one initial size and it's not working except i set fixed value, like 706. But if we set one fixed value, it would be always be this height.

    onCreate: function () {
        var self = this;
        $j(window).on('resize', function () {
            $j(self).parent().height($j(self).children().first().height());
        }).trigger('resize');
    }

We can debug the js, and see the returned height is 0 as default, even we set each item image one fix value when initialize them.

console.log($j(self).children().first().height());

Up to this moment, we can suppose when initialize the carouFredSel object, the height hasn't can be created properly by carouFreSel js. At last, I try to make this change because it looks like carouFredSel has some 'bugs' when calculate the image height when initiation on Chrome (I guess).

<script type="text/javascript">
    //jQuery(document).ready(function(){
    jQuery(window).load(function(){ /* */
        initMediaGallery();
    });
</script>

carouFredSel responsive height

14 Answers14

Linked