CarouFredSel responsive height issue

1
votes

İ'm using caroufredsel plugin to instantiate a responsive carousel and i'm facing a problem. When i change window size by dragging the window everything works fine, but when i maximise window using maximise button, the height of the carousel doesn't adjust, leaving the gap below(except in Opera). İt looks like the browsers don't fire the resize event properly. İ've done a research, and found similar posts with advices, but nothing worked for me. This looks more like an issue of resize event not being handled properly when maximise button is clicked. Does anyone have any suggestions? Thanks in advance. Here's the code:

$slider.carouFredSel({
    responsive: true, 
    auto : false,
    height: 'variable',
    prev : "#carousel_nav_left",
    next : "#carousel_nav_right",
    circular  : true,
    infinite  : true,
    scroll: {
        items: 1,
        mousewheel: true,
        easing: "easeInOutQuint",
        duration: 700,                      
    },
    swipe: {
        onTouch: true,
        onMouse: true,
        easing: "easeInOutQuint",
        duration: 500
    }, 
    items: {
        width: 320,
        height: 'variable',
        visible: {
            min: 1,
            max: 3
        }
    },                  
});

Edit:

The fix offered in other posts was adding the following code during the initialization:

onCreate: function () {
    $(window).on('resize', function () { $slider.parent().add($slider).height($slider.children().first().height();
}).trigger('resize');

}

1
window-resizecaroufredsel
What have you tried that didn't work? How is your issue different from the others you talk of? – Hannes Johansson

1 Answers

1
votes

this is correct:

    onCreate: function () {
        $(window).on('resize', function () {
            $slider.parent().height($slider.children().first().height())
        })
    }