Проблема с адаптивной высотой карусели изображений caroufredsel

Я использую плагин caroufredsel с адаптивными изображениями, но слайдер получает полную высоту изображений (до изменения их размера) и оставляет большой зазор внизу.

Функция вызывается в функции window.resize, потому что мне нужно постоянно проверять ширину окна. Мне нужно сделать это, потому что количество отображаемых элементов должно варьироваться, и если окно меньше определенной ширины, я должен уничтожить карусель и просто показать все элементы.

Вот мой код:

$(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.
});

Решение этого вопроса: отзывчивая высота carouFredSel устраняет проблему с высотой, но я не могу совместить это с возможностью проверить количество элементов и уничтожить/создать карусель в зависимости от ширины окна.

Любая помощь будет принята с благодарностью - я рву на себе волосы. Спасибо.

EDIT У меня есть достойное решение. Я немного изменил свои требования, но я думаю, что это сработало бы, даже если бы я этого не сделал.

Незначительное изменение требований заключалось в том, что вместо использования моей переменной «numItems» я просто использовал встроенные минимальные и максимальные элементы плагина. На практике это означает, что количество элементов становится 5 > 4 > 3 по мере того, как окно браузера становится меньше, что в любом случае лучше, чем переход от 5 к 3.

Затем я объединил ответы на следующие два вопроса:

высота отклика carouFredSel

Нужен условный jquery для адаптивного сайта

Это удалось заставить его работать. Вот код, который у меня получился:

$(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();

});

Надеюсь, это пригодится кому-то.