Flexslider height è uguale al più alto su un browser mobile

Sto cercando di capire un problema con Flexslider che appare solo quando lo test su un browser mobile come Safari Mobile.

Tutti i contenitori

  • hanno la stessa altezza del più alto
  • , anche quando non c’è abbastanza contenuto da giustificare la loro altezza.

    Non sono sicuro di come ottenere una schermata di questo, poiché funziona bene su un browser desktop ma non sui browser mobili. Ecco un violino che mostra che funziona come mi aspetterei quando lo visualizzo sul browser desktop, l’altezza del contenitore si ridimensiona a seconda della quantità di contenuti.

    http://jsfiddle.net/CsCyh/

      Ecco l’hml:

      Ecco il JS per flexslider:

       $('.flexslider').flexslider(); 

      Hmm, mi sono imbattuto in questo problema un po ‘di tempo fa. Spero che aiuti!

       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'); 
    •  $('.flexslider').flexslider({ after: function(slider){ currHeight = $('.flexslider').find('.slides > li').eq(slider.currentSlide).outerHeight(true); $('.flexslider').height(currHeight); } }); 

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


      Aggiungi questo allo script che chiama lo slider.

       animateHeight: false, 

      per esempio.:

       $(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