Flexslider <Li> Height's Equal the Tallest <Li> on a Mobile Browser

Flexslider li height's equal the tallest li on a mobile browser

Hmm, I ran into this issue awhile ago. I hope this helps!

var evenSliderHeight = function(slideContainer, slideItem) {
  var slider_height = 0;
  var $slider_slide = $(slideContainer).find(slideItem);
  $slider_slide.each(function() {
    var __height = $(this).outerHeight(true);
    if ( slider_height < __height ) {
       slider_height = __height;
    }
  });
  $slider_slide.css('min-height', slider_height);
};
evenSliderHeight('.flexslider-container', '.slide');

100% height slides on FlexSlider

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

Container height issue using flexslider 2 only on IOS device

I actually never found a solution to get flexslider working, so I switched to using the BXSlider which has an adaptiveHeight option.

http://bxslider.com

How to make Flexslider display different aspect ratio images on iOS?

It doesn't look like it's currently possible with what Flexslider provides. My best alternative was to use BXSlider which has an adaptiveHeightoption.

FlexSlider Auto Height still leaving a space below slider

Add

overflow: hidden

to

#slider

Fixed size of Flexslider

Let's say you wanted a fixed size of 200px by 200px. Add these properties to the following selectors in the flexslider.css file and you should be good to go:

.flexslider {
    width: 200px;
    height: 200px;
}

.flexslider .slides img {
    width: 200px;
    height: 200px;
}

Hope this helps!

flexslider makes iPad crash

After many tests and tries, I figured out the issue : it seems that when there are many slides, the "fade" flexslider animation consumes lot of memory and makes the iPad crash.

To fix the issue, I defined on script.js "slide" for the animation effect for my slider, and it worked.

---

Related Topics