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

Answer 1

server.servlet.context-path=<the context path>

Answer 2

 $("#lightSlider").lightSlider({
    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);
    },
    item:4,
    loop:true,
    slideMove:1,
    auto:true,
    pauseOnHover:true,
    easing: "cubic-bezier(0.25, 0, 0.25, 1)",
    speed:600,
    responsive : [
      {
        breakpoint:992,
        settings: {
          item:3,
          slideMove:1
        }
      },
      {
        breakpoint:768,
        settings: {
          item:2,
          slideMove:1
        }
      },
      {
        breakpoint:576,
        settings: {
          item:1,
          slideMove:1
        }
      }
    ]
  });

Lightslider响应高度被切断

2 个答案: