3

Safari Mobile などのモバイル ブラウザーでテストしたときにのみ表示される Flexslider の問題を見つけようとしています。

すべての <li> コンテナは、同じ高さにするのに十分なコンテンツがない場合でも、最も高い <li> と同じ高さです。

デスクトップ ブラウザでは正常に動作しますが、モバイル ブラウザでは動作しないため、このスクリーン ショットを取得する方法がわかりません。これは、デスクトップ ブラウザーで表示したときに期待どおりに動作することを示すフィドルです。コンテナーの高さは、コンテンツの量に応じてサイズが変更されます。

http://jsfiddle.net/CsCyh/

ここにhmlがあります：

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="http://i.imgur.com/YSVlz2Z.jpg" />
      <h2><a href"#">First Link Here</a></h2>
      <p>Some text here that could be a message</p>
      <a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">Another Link Here</a>
    </li>
    <li>
      <img src="http://i.imgur.com/YSVlz2Z.jpg" />
      <h2><a href"#">Second Link Here</a></h2>
      <p>Some text here that could be a message</p>      
    </li>
    <li>
     <img src="http://i.imgur.com/YSVlz2Z.jpg" />
     <h2><a href"#">Third Link Here</a></h2>
     <p>Some text here that could be a message</p>     
    </li>
  </ul>
</div>

flexslider の JS は次のとおりです。

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

5 に答える 5

3

うーん、私はしばらく前にこの問題に遭遇しました。これが役立つことを願っています！

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');
于 2013-10-17T20:52:22.987 に答える
2 
$('.flexslider').flexslider({
  after: function(slider){
    currHeight = $('.flexslider').find('.slides > li').eq(slider.currentSlide).outerHeight(true);
    $('.flexslider').height(currHeight);
  }
});

JSFiddle の更新: http://jsfiddle.net/CsCyh/14/

于 2014-01-31T23:12:40.213 に答える
1

これはCSSのみのソリューションです。animation: "slide"これは、次のプロパティに対してテストされます。

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

は、flexslider がインライン スタイルとして生成するプロパティを!importantオーバーライドします。display:block;これで、最も高いスライドに基づいて、すべてのパネルが同じ高さを共有します。

于 2020-04-14T06:55:57.120 に答える
0

これをスライダーを呼び出すスクリプトに追加します。

animateHeight: false,

例えば。：

$(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
于 2017-10-05T11:45:13.853 に答える