Question

我遇到了Slick carousel JS插件有多个 slidesToShow 有不同高度的问题。

我需要幻灯片具有相同的高度，但是使用CSS flex-box它不起作用，因为幻灯片具有冲突的CSS定义。

在论坛和网络上也没有找到任何有用的东西。

如果我得到了一些工作，我会在这里发布解决方案。当然，欢迎任何建议。

HTML

runSet.sh

JS

<div class="slider">
  <div class="slide">
    <p>Lorem ipsum.</p>
  </div>
  <div class="slide">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</p>
  </div>
  <div class="slide">
    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="slide">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
  </div>
</div>

CSS

$('.slider')
.slick({
    autoplay: false,
    dots: false,
    infinite: false,
    arrows: false,
    slidesToShow: 2,
    slidesToScroll: 2,
    rows: 0
});

Answer 1

好的家伙我找到了一个简单的解决方案。只需添加一个 setPosition 回调函数（在位置/大小更改后触发），它将幻灯片的高度设置为滑块的高度（slideTrack）：

<强> JS

$('.slider').slick({
    autoplay: false,
    dots: false,
    infinite: false,
    arrows: false,
    slidesToShow: 2,
    slidesToScroll: 2,
  rows: 0
})
.on('setPosition', function (event, slick) {
    slick.$slides.css('height', slick.$slideTrack.height() + 'px');
});

不要忘记你的幻灯片需要有完整的高度：

<强> CSS

.slide {
  height: 100%;
}

这是一个小jsFiddle来演示： https://jsfiddle.net/JJaun/o29a4q45/

Answer 2

添加一些CSS样式即可使用：

.slick-track
{
    display: flex !important;
}

.slick-slide
{
    height: inherit !important;
}

享受！：-）

Answer 3

我还有另一种css解决方案。您可以使用table/table-cell覆盖浮动元素。

$(function() {
  $('.slider')
    .slick({
      autoplay: false,
      dots: false,
      infinite: false,
      arrows: false,
      slidesToShow: 2,
      slidesToScroll: 2,
      rows: 0
    });
})

.slide {
  background-color: #ccc;
  padding: 10px;
  display: table-cell !important;
  float: none !important;
}

.slick-track {
  display: table !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>


<div class="slider">
  <div class="slide">
    <p>Lorem ipsum.</p>
  </div>
  <div class="slide">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</p>
  </div>
  <div class="slide">
    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="slide">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
  </div>
</div>

Answer 4

@JJaun的js解决方案并不完美，因为如果将幻灯片使用背景图片，您会看到高度跳跃。这对我有用：

.slick-track {
  display: flex !important;
}

.slick-slide {
  height: auto;
}

Answer 5

用于将来的搜索：

您可以简单地使用：

$('.slick').slick({ 
      /* your config */ 
 }).on('setPosition', function (event, slick) {
      slick.$slides.css('height', slick.$slideTrack.height() + 'px');
 });

Answer 6

如上所述。在光滑的滑块上工作正常

.slick-track
{
    display: flex !important;
}

.slick-slide
{
    height: inherit !important;
}

但是，我在使用流畅的同步导航时遇到问题

简单地放在css下面来覆盖它。

.slick-slide {
    margin-bottom: 0;
    object-fit: cover;
}

Answer 7

.slick-track { display: flex; align-items: stretch; }
.slick-slide { height: auto; flex: 1; }
而且，如果你想把最后一个元素粘在块的底部，添加 display: flex 为包装器和 margin-top: auto; 为最后一个元素

Answer 8

我写了一个快速的JS技巧，使图像高度不同的画廊看上去更整洁。

它执行以下操作：

获取滑块实例
找出高度-图片高度将设置为该高度
获取每个图像的src属性并将其隐藏

将src属性设置为图像的父级，作为背景图像以及一些CSS。

function equalizeImagesHeight(slider) {
    const slides = slider.find('.slick-slide');
    const imgHeight = $(slider)[0].clientHeight;
    slides.each(function(slide){
        const src = $(this).find('img').hide().attr('src');
        $(this).css({
            backgroundImage:'url('+src+')',
            minHeight: imgHeight,
            backgroundSize: "cover",
            backgroundPosition: "center"
        });
    });
};

equalizeImagesHeight（$（'。my-slider'））;

Answer 9

如果可以使用object-fit，这是仅适用于SCSS的解决方案：

.slick {
  .slick-track {
    display: flex;

    .slick-slide {
      display: flex;
      height: auto;

      img {
        height: 100%;
        object-fit: cover;
        object-position: center;
      }
    }
  }
}

Answer 10

以上建议对我没有用。我的滑杆图像为人像，但可能具有不同的h / w纵横比。我使用js修复了它。不过感觉很难看，希望我能找到更清洁的东西。

$carousel.on('setPosition', function (event, slick) {
      const $slideImages = slick.$slideTrack.find('.slick-slide-img');
      if($slideImages.first()[0].clientHeight >= $slideImages.first()[0].naturalHeight) return;
      $slideImages.height('auto');
      $slideImages.width('100%');
      const imgHeights = $slideImages.map(function(){
        return this.clientHeight;
      }).get();
      const maxHeight = Math.max.apply(null, imgHeights);
      $slideImages.height(maxHeight);
      $slideImages.width('auto');
    }

即使在初始化代码后只需要执行一次代码，我也必须使用setPosition事件。 init事件不起作用，因为init上的图像高度差了。前一个或两个setPosition事件相同-因此if($slideImages.first()[0].clientHeight >= $slideImages.first()[0].naturalHeight) return;。

光滑的旋转木马 - 强制滑动以具有相同的高度

10 个答案: