javascript - Lightslider响应高度被切断

Question

我尝试使用 Lightslider 插件为我的投资组合图像创建一个响应式滑块。

但是，投资组合的每个缩略图的高度都被切掉了（顶部和底部）

我的代码：

$('#responsive').lightSlider({
            item: 4,
            loop: false,
            slideMove: 2,
            easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
            speed: 600,
            pager: false,
            slideMargin: 20,
            responsive: [
                {
                    breakpoint: 800,
                    settings: {
                        item: 3,
                        slideMove: 1,
                        slideMargin: 6,
                    }
                },
                {
                    breakpoint: 480,
                    settings: {
                        item: 2,
                        slideMove: 1,
                    }
                }
            ]
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/js/lightslider.min.js"></script>
<div class="item"> 
   <ul id="responsive" class="content-slider">
     <?php for($i=1; $i<7; $i++){ ?>
     <li>
       <img src="https://assets.materialup.com/uploads/82eae29e-33b7-4ff7-be10-df432402b2b6/preview"  style="width: 40%"/>
     </li>
     <?php } ?>
   </ul>
</div>

我当前的输出： https ://imgur.com/a/NCOWetU

标签： javascripthtmlcss

Answer 1

Please mention in your lightslider it will help you

onSliderLoad: function (el) {
  var maxHeight = 0,
    container = $(el),
    children = container.children();
  children.each(function () {
    var childHeight = $(this).height();
    if (childHeight > maxHeight) {
      maxHeight = childHeight;
    }
  });
  container.height(maxHeight);
}