100% height slides on FlexSlider

css, flexslider, height

Solution

Please apply below given JS code

 function setEqualHeight(selector) {
        var heights = new Array();

        $(selector).each(function() {

            $(this).css('min-height', '0');
            $(this).css('max-height', 'none');
            $(this).css('height', 'auto');

            heights.push($(this).height());
        });

        var max = Math.max.apply( Math, heights );
    $(selector).each(function() {
            $(this).css('height', max + 'px');
        }); 
    }


        setEqualHeight('.slides li');

        $(window).resize(function() {

            setTimeout(function() {
                setEqualHeight('.slides li');
            }, 120);
        });

$('.flexslider').flexslider({
    animation: "slide"
});

See Updated Demo for Window Resize

Problem

I'm trying to create a responsive slider with FlexSlider. My goal is to have all slides with the maximum height, equal to `.flexslider` 100% height. The following snippet shows my issue: I would like all slides (both red and green) to have the maximum height, covering container height (independently from their content). I've tryed to set `height:100%;` but it doesn't work. What can I do? FIDDLE

Original source

Related problems