Issue with responsive height on caroufredsel image carousel

Question

I am using the caroufredsel plugin with responsive images, but the slider is getting the full height of the images (before they are resized) and leaving a big gap at the bottom.

The function is being called within a window.resize function because I need to constantly check the width of the window. I need to do this because the number of items shown has to vary, and if the window is below a certain width I have to destroy the carousel and just show all items.

Here is my code:

$(document).ready(function(){
$(window).resize(function(){
var numItems;
var width = $(window).width();
if(width >=769) {
    numItems = 5;
} else {
    numItems = 3;
}
var carousel = $("#carousel");
$("#carousel").carouFredSel({       
    responsive  : true,
    scroll      : 1,
    items       : {
        visible     : numItems,
        width       : 200
    },
    onCreate : function () {
        carousel.parent().add(carousel).css('height', carousel.children().first().height() + 'px');
    }
});
if (width <=480){
    $("#carousel").trigger("destroy");
}
}).resize();//trigger the resize event on page load.
});

The solution to this question: carouFredSel responsive height fixes the height issue, but I can't seem to combine it with being able to check the number of items and destroy/create the carousel depending on the width of the window.

Any help would be greatly appreciated - I'm tearing my hair out here. Thanks.

---

EDIT I have a decent solution. I did change my requirements ever so slightly but I think this would have worked even if I hadn't.

The minor requirements change was that instead of using my variable "numItems" I just used the plugin's inbuilt min and max items. In practical terms this means the number of items goes 5 > 4 > 3 as the browser window gets smaller, which is actually nicer than jumping from 5 to 3 anyway.

I then combined answers from the following two questions:

carouFredSel responsive height

Need conditional jquery for responsive site

This managed to get it working. Here's the code I ended up with:

$(document).ready(function(){


 function imageCarousel() {

var carousel =  $('#carousel');

var width = $(window).width();
if(width <=480) {
     carousel.trigger('destroy');
}

else {

carousel.carouFredSel({
auto: true,
responsive: true,
height : 'auto',
scroll: {
    items : 1
},
 swipe: {
    onTouch: true,
    items: 3
},
items : {
        visible     : {
            min    : 3,
            max    : 5
        },
        width       : 200
    },
    onCreate : function () {
        carousel.parent().add(carousel).css('height', carousel.children().first().height() + 30 + 'px');
    }

});

}

 $("#prev").on("click", function(){
    $("#carousel").trigger("prev");
});
$("#next").on("click", function(){
    $("#carousel").trigger("next");
});

};

var resizeTimer;

$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(imageCarousel, 0);
}).resize();

});

Hope this comes in handy to someone.