web-dev-qa-db-ja.com

スリックカルーセル-スライドの高さを同じにする

複数のslidesToShowで高さが異なるSlickカルーセルJSプラグインで問題が発生しています。

スライドには同じ高さが必要ですが、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;
}
javascriptjquerycssslick.js
18
JJaun

わかりました、私は簡単な解決策を見つけました。スライドの高さをスライダーの高さに設定する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/

22
JJaun

いくつかのCSSスタイルを追加すると、準備が整います。

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

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

楽しい！ :-)

31
Phoenix

別の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>
2
ocanal

@JJaunのjsソリューションは完璧ではありません。スライドに背景画像を使用すると、高さがジャンプするのが見えるからです。これは私のために働いた：

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

.slick-slide {
  height: auto;
}
1
Artem Bruner

私はちょっとしたJSハックを書いて、画像の高さが異なるギャラリーを作成して、少し見栄えを良くしました。

次のことを行います。

  1. スライダーインスタンスを取得する
  2. 高さを調べる-画像の高さはそれに設定されます
  3. 各画像のsrc属性を取得して非表示にします

  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'））;

0
Damian Drozdowicz

object-fit を使用しても問題ない場合のSCSS専用のソリューションを次に示します。

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

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

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