Flexslider height's equal the tallest on a mobile browser

Question

I am trying to figure out an issue with Flexslider that only appears when I test it on an mobile browser such as Safari Mobile.

All of the

containers are the

Answer 1

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');

Answer 2

Here is a CSS only solution. This is tested for the animation: "slide" property:

.flexslider .flex-viewport { display: flex; flex-direction: column; }
.flexslider .flex-viewport > ul { display: flex; }
.flexslider .flex-viewport > ul > li { display: flex !important; }

The !important overrides the display:block; property that flexslider generates as inline style. Now all panels share an equal height, based on the highest slide.

Answer 3

For anyone still has this issue in 2019/2020, please have a look at the new property called "smoothHeight" at the Flexslider docs

I fixed my issue by setting "smoothHeight" to true.

$('.sliders').flexslider({
    animation: 'slide',
    smoothHeight: true,
    controlNav: false,
    customDirectionNav: $('.js-slider-control button'),
});

Answer 4

Add this to the script that calls the slider.

animateHeight: false,

eg.:

$(window).load(function(){ if ( $('#content-slider-wrap').length == 0 ) return false
    $('#content-slider-wrap').flexslider({
        animation:"fade",
        slideshow: true,
        directionNav: true,
        animateHeight: false,
        controlNav:false ,
........... etc etc

Answer 5

$('.flexslider').flexslider({
  after: function(slider){
    currHeight = $('.flexslider').find('.slides > li').eq(slider.currentSlide).outerHeight(true);
    $('.flexslider').height(currHeight);
  }
});

JSFiddle Update: http://jsfiddle.net/CsCyh/14/

---