CarouFredSel item width issue on trigger insertItem

Question

I'm using a Responsive CarouFredSel slider in wordpress theme. I'm removing and placing back slider element (first slider element that is menu) on windows width changes: Remove if less than 980 px, and put back, if width comes back over 980px. So at this moment - everything works just fine.

The problem shows up, when a inserted element shows - it has a wrong width size. How it happens: I'm decreasing browser window size until it comes lower than 980px (element removes as it should), than I press 'maximize' button on browser, so the size comes back and reaches more than it needs to insert element back. At that moment, I suppose, CarouFredSel resizes all elements, except one that I'm inserting back on resize. That one has the same width as the other elements had before resize took part. So if all elements were 700 px width, after maximizing browser everyone comes to 1335px width, except that one that I'm adding - that keeps the 700px size.

I'm searching for a way, how to trigger insertItem before the CarouFredSel resizes elements, if window size changes. Or any way, that I could fix that size. Well, I think I could get same level elements (divs) size, and manually add it my element, but it is not good way. Any ideas on this issue would be great.

Here is the piece of code:

var $window = $(window);
var $menuDiv = $('#slide_0');
var $sizeFlag = 2;

function checkWidth() {
    var windowsize = $window.width();
    if (windowsize > 980) {
        {
            if ($sizeFlag == 0 || $sizeFlag == 2) {
                if ($sizeFlag == 2) {
                    sliderPauseOnMenu();
                    $sizeFlag = 1;
                } else if ($sizeFlag == 0) {

                    $sizeFlag = 1;
                    $('.slider').trigger('insertItem', $menuDiv); //Inserting element back
                    sliderPauseOnMenu();
                }
            }
        }
    } else if ($sizeFlag == 1) {
        $('.slider').trigger('removeItem', $menuDiv); //removing element
        $('.slider').trigger('play');
        $sizeFlag = 0;
    }

}
checkWidth();

$(window).resize(checkWidth);

sliderPauseOnMenu(); - Function for pausing slider on first time, cus there is a menu.

Answer 1

After a few hours of research, I've came to only solution, that you have to set width by your own. CarouFredSel slider listens to resize event, as it's responsive, and does slider elements resize very first - only than all triggered actions happen. So if you have to add any item on resize event - you will have to manually set element width. The simplest way is ti copy same level elements width:

var $menuDiv = $('#slide_0');
$('.slider').trigger('insertItem', $menuDiv);

var $slideWidth = $('#slide_1').width();
$menuDiv.css('width', $slideWidth);

That's all magic for now. If any other way of getting this work will be found - I'll share it here.