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

Slick carousel - force slides to have the same height

提问by JJaun

Im having trouble with the Slick carousel JS plugin with multiple slidesToShowwhich have different heights.

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

I need the Slides to have the same height, but with CSS flex-box it doesnt work as the slides have conflicting CSS definitions.

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

Also didn't find anything usefull in the forums and on the web.

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

If i get something working, i will post the solution here. Of course any suggestions are welcome.

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

HTML

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

JS

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

CSS

CSS

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

采纳答案by JJaun

Ok guys i found an easy solution. Just add a setPositioncallback function (fires after position/size changes) which sets the height of the slides to the height of the slider (slideTrack):

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

JS

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');
});

Dont forget that your slides need to have full height:

不要忘记你的幻灯片需要有全高：

CSS

CSS

.slide {
  height: 100%;
}

Here is a little jsFiddle to demonstrate: https://jsfiddle.net/JJaun/o29a4q45/

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

回答by Phoenix

Add a couple of CSS styles and it will be ready:

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

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

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

Enjoy! :-)

享受！:-)

回答by Artem Bruner

The js solution from @JJaun is not perfect, because you see the height jumping if you use an background image for the slides. This worked for me:

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

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

.slick-slide {
  height: auto;
}

回答by Okan Kocyigit

I've another css-only solution. you can override floated elements with table/table-cell.

我有另一个 css-only 解决方案。您可以使用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>

回答by Damian Drozdowicz

I've wrote a quick JS hack to make a gallery with different images heights to look a little neater.

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

It does the following:

它执行以下操作：

1. Get slider instance
2. Find out it's height - images height will be set to that
3. Get the src attr for each image and hide it

4. Set src attr to image's parent as a background image together with some 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'));

1. 获取滑块实例
2. 找出它的高度 - 图像高度将设置为该高度
3. 获取每个图像的 src attr 并将其隐藏

4. 将 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'));

回答by dodov

Here's an SCSS-only solution if you're OK with using object-fit:

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

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

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

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