Slick轮播 - 强制幻灯片具有相同的高度

Question

Slick轮播 - 强制幻灯片具有相同的高度

javascriptjquerycssslick.js

91

我在使用 Slick 轮播 JS 插件时遇到了问题，因为它有多个 slidesToShow，而这些幻灯片的高度不同。

我需要让这些幻灯片拥有 相同的高度，但是使用 CSS 弹性盒子布局并不能解决这个问题，因为幻灯片具有冲突的 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;
}

- JJaun

1

如果将“无限”的选项设置为true，则标记为正确的解决方案将无法工作。 - Peky27

13个回答

32

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

- JJaun

1

我在轮播方面遇到了类似的问题。我尝试将setPosition修复应用到我的脚本中，但它只会破坏它。你能看出我哪里错了吗？https://codepen.io/moy/pen/KBZbZL - user1406440

你应该更新这个答案，首先将$slides的高度设置为“auto”，否则在调整大小时，由于$slideTrack的子元素$slides具有固定像素高度，所以你的高度测量将不准确。 - jdbosley

3

请使用 slick.$slideTrack.find('.slick-slide') 更新答案，因为克隆元素在过渡时高度不同。 - minlare

12

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

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

.slick-slide {
  height: auto;
}

- Artem Bruner

6

如上所述。在slick slider上可以正常工作。

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

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

但是，当使用Slick同步导航时，我遇到了问题。

只需应用以下CSS即可解决。

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

- teenage vampire

4

纯CSS解决方案

.slick-track {
    display: flex;
}

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

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

- Lysak

3

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

- Вадим Гаджимурадов

3

如果您愿意使用 object-fit，这里提供了一个仅使用 SCSS 的解决方案：

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

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

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

- dodov

2

我还有一个仅使用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>

- Okan Kocyigit

@ocanal，我尝试将这个应用到我遇到的问题上，但代码似乎出了问题，你能看出来为什么吗？https://codepen.io/moy/pen/KBZbyL - user1406440

抱歉 @ocanal，我在睡觉前匆忙发布了那条评论。所以当 Slick 被包含时，是不是只需要删除额外代码之前的 ; 就可以了？我意识到我稍微修改了我的标记，已经解决了JS中断的问题，但是为什么我没有得到100%的高度，请问你看出来原因了吗？https://codepen.io/moy/pen/mjXyPM - user1406440

1

@user1406440，我已将“resort”更改为“tile”，并进行了一些小修复。更新后的代码在此处：https://codepen.io/anon/pen/QBQjWp - Okan Kocyigit

太棒了，你对第一个示例做了如此简单的更改 - 我今天显然没有思路！所以所有标记/ CSS 都没问题，只是额外的 js 引用了 slick-slide 而不是 resorts？再次感谢您的帮助！ - user1406440

实际上还有一个最后的快速问题，我已经修改了代码为 slick.$slideTrack.height() - 30 + 'px'，因为轨道上有顶部/底部边距。这是最好的方法还是有一个减去任何边距的 height 值？我知道有 heightOuter 等，但那只是用于添加填充。 - user1406440

显示剩余6条评论

2

用于未来的搜索：

您可以简单地使用：

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

- Jazz Macedo

1

对于我来说，在2021年最新版本的Slick中，它会将我的项目包装在额外的div中。

所以我做了以下操作：

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

        .slick-slide
        {
            height: auto;

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

                .myItemClass
                {
                    height: 100%;
                }
            }
        }

- Damian Chudobiński

2

你只需要添加 {rows: 0} 就可以避免产生额外的 div。 - JJaun

很高兴知道，下次我会试试使用slick，但这对某些人可能很有用。 - Damian Chudobiński

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Phoenix · Accepted Answer

244

添加一些CSS样式，它就准备好了：

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

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

享受吧！:-)

- Phoenix

6

太好了！这段代码在新版本（1.9.0）下完美运行。 - Reza Mamun

7

非常好用。我添加了一些额外的 flex 声明来让不同大小的图片在二维中心对齐：`.slick-track { display: flex !important; }.slick-slide { height: inherit !important; display: flex !important; justify-content: center; align-items: center; } ` - Stuart Cusack

19

这是一个更简单的解决方案。我还需要添加 .slick-slide > div { height: 100%; } 来考虑自动生成的 div 元素。 - Luke

2

这是每个人都需要的。+1 - Nandesh

4

在我的情况下，在track和slide类的div之间有另外两个 div。为了使其工作，我也将它们的高度设置为100％，就像@Luke所说的一样 :) - João Vitor Veronese Vieira

显示剩余4条评论