Flexslider<李>高度's等于最高的<李>在移动浏览器上

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

本文关键字：gt lt 移动 浏览器 高度 Flexslider 于最高      更新时间：2023-09-26

我正试图找出Flexslider的一个问题，该问题只有在Safari mobile等移动浏览器上测试时才会出现。

所有<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();

嗯，我之前遇到过这个问题。我希望这能有所帮助！

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

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

对于2019/2020年仍有此问题的人，请查看Flexslider文档中名为"smoothHeight"的新属性

我通过将"smoothHeight"设置为true来解决我的问题。

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

这里是一个仅支持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; }

!important将覆盖flexroader作为内联样式生成的display:block;属性。现在，所有面板共享相同的高度，基于最高的幻灯片。

将其添加到调用滑块的脚本中。

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
相关文章：