光滑的旋转木马 - 强制幻灯片具有相同的高度答案

【问题标题】：Slick carousel - force slides to have the same height光滑的旋转木马 - 强制幻灯片具有相同的高度
【发布时间】：2018-02-28 11:48:57
【问题描述】：

我在使用具有多个不同高度的 slidesToShow 的 Slick carousel JS 插件时遇到问题。

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

另外，我在论坛和网络上没有发现任何有用的东西。

HTML

<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>

JS

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

CSS

.slide {
  height: 100%;
  background-color: #ccc;
  padding: 10px;
}

【问题讨论】：

如果“infinite”选项设置为true，则标记为正确的解决方案将不起作用。

标签： javascript jquery css slick.js

【解决方案1】：

添加几个 CSS 样式就可以了：

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

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

享受吧！ :-)

【讨论】：

太棒了！这段代码在新版本 (1.9.0) 中的作用就像一个魅力。
效果很好。我为不同尺寸图像的 2D 居中添加了一些额外的 flex 声明：.slick-track { display: flex !important; } .slick-slide { height: inherit !important; display: flex !important; justify-content: center; align-items: center; }
这是一个更简单的解决方案。我还必须添加 .slick-slide > div { height: 100%; } 来说明自动生成的 div 元素。
这是每个人都需要的。 +1
在我的例子中，track 和 slide 类 div 之间还有两个 divs。为了让它发挥作用，我也为他们设置了height: 100%，类似于@Luke 所说的:)

【解决方案2】：

好吧，伙计们，我找到了一个简单的解决方案。只需添加一个 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/

【讨论】：

我遇到了类似的轮播问题。我试图将setPosition 修复应用于我的脚本，但它只是破坏了它。你能看出我哪里错了吗？ codepen.io/moy/pen/KBZbZL
您应该更新此答案以首先将 $slides 高度设置为“auto”，否则在调整大小时您的高度测量将不准确，因为您的 $slideTrack 高度将关闭，因为它的子 $slides 具有固定像素高度。
您应该更新答案以使用slick.$slideTrack.find('.slick-slide')，因为克隆的元素在过渡时没有相同的高度。

【解决方案3】：

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

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

.slick-slide {
  height: auto;
}

【讨论】：

【解决方案4】：

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

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

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

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

【讨论】：

【解决方案5】：

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

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

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

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

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

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

【讨论】：

【解决方案6】：

我还有另一个纯 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>

【讨论】：

在我的实际用例中，我必须在完成的引导布局中构建它，我无法真正改变......这里我有里面有卡片的引导列，这些卡片与实际的高度不同幻灯片...链接这个jsfiddle.net/JJaun/o29a4q45/22 知道如何解决它？
@JJaun，hımm 嵌套元素，css 变得越来越复杂。比你应该用你的js方式（计算高度）来做，这里是更新的，jsfiddle.net/o29a4q45/43
设置内容高度再次触发setPosition。我添加了一个修复程序。再次检查jsfiddle.net/o29a4q45/49
是的，我明白了，确实没有必要在每个 setPosition 事件上设置高度。谢谢。
@user1406440，我已将 resort 更改为 tile，并进行了一些小修复，更新的在这里，codepen.io/anon/pen/QBQjWp

【解决方案7】：

.slick-track { display: flex; align-items: stretch; }
.slick-slide { height: auto; flex: 1; }
并且，如果您想将最后一个元素粘贴在块的底部，请将display: flex 用于包装，将margin-top: auto; 添加到最后一个元素

【讨论】：

【解决方案8】：

我写了一个快速的 JS hack 来制作一个具有不同图像高度的画廊，看起来更整洁。

它执行以下操作：

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

将 src attr 设置为图像的父级作为背景图像以及一些 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'));

【讨论】：

【解决方案9】：

对于未来的搜索：

你可以简单地使用：

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

【讨论】：

【解决方案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 事件，尽管在初始化 slick 之后代码只需要执行一次。 init 事件不起作用，因为 init 上的图像高度偏离了。前一个或两个 setPosition 事件相同 - 因此是 if($slideImages.first()[0].clientHeight >= $slideImages.first()[0].naturalHeight) return;。

【讨论】：

【解决方案11】：

2021 年最新版本的 slick 对我来说 slick keep wrap my item's with additional div

所以我这样做：

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

        .slick-slide
        {
            height: auto;

            .slick-slide> div
            {
                height: 100%;

                .myItemClass
                {
                    height: 100%;
                }
            }
        }

【讨论】：

你可以只添加 {rows: 0} 而不会产生额外的 div
很高兴知道病态的人下次生病时尝试一下，但仍然对某人有用

【解决方案12】：

.slick-track {
    display: flex;
}

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

.slick-slide img {
    height: 100%;
    object-fit: contain;
    object-position: center;
}

【讨论】：