itemMargin doesn't change dynamically on window.resize like maxItems/minItems.

[AnupamKhosla]

Demo: http://stackoverflow.com/q/42763600/3429430

[lucasbasquerotto]

I think the issue should be https://stackoverflow.com/questions/42764310/why-dont-the-itemmargin-of-flex-slider-change-dynamcially-on-window-resize

The property itemWidth also can be changed dynamically, but not itemMargin.

Here is a simple example (it shows 2 slides in each iteration):

The css:

.container {
    width: 840px; /* 400 + 40 + 400 */
}

@media screen and (max-width: 820px) {  
    .container {
        width: 620px; /* 300 + 20 + 300 */
    }
}

The javascript:

(function() {
    // store the slider in a local variable
    var $window = $(window), flexslider = { vars:{} };

    function getItemWidth() {
        return (window.innerWidth <= 820) ? 300 : 400;
    }

    function getItemMargin() {
        return (window.innerWidth <= 820) ? 20 : 40;
    }

    $('.container').find('.flexslider').flexslider({
        animation: 'slide',
        slideshow: 'false',
        slideshowSpeed: 2000,
        animationSpeed: 600,
        easing: 'swing',
        directionNav: false,
        itemWidth: getItemWidth(),
        itemMargin: getItemMargin(),
        start: function(slider){
            flexslider = slider;
            $(slider).addClass('loaded');
        }
    });

    // check grid size on resize event
    $window.resize(function() {
        var itemWidth = getItemWidth(), itemMargin = getItemMargin();

        flexslider.vars.itemWidth = itemWidth; // work
        flexslider.vars.itemMargin = itemMargin; // don't work
    });
}());