Glattes Karussell – Zwingen Sie die Rutschen dazu, dieselbe Höhe zu haben

Ich habe Probleme mit dem Slick-Karussell-JS-Plugin mit mehreren SlidesToShow die unterschiedliche Höhen haben.

Ich brauche die Slides um die zu haben selbe Größeaber mit CSS Flex-Box funktioniert es nicht, da die Folien widersprüchliche CSS-Definitionen haben.

Auch in den Foren und im Internet habe ich nichts brauchbares gefunden.

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

Fügen Sie ein paar CSS-Stile hinzu und es ist fertig:

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

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

Genießen! 🙂

Ok Leute, ich habe eine einfache Lösung gefunden. Fügen Sie einfach ein hinzu Position setzen Callback-Funktion (feuert nach Positions-/Größenänderungen), die die Höhe der Folien auf die Höhe des Schiebereglers (slideTrack) setzt:

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

Vergessen Sie nicht, dass Ihre Folien die volle Höhe haben müssen:

CSS

.slide {
  height: 100%;
}

Hier ist ein kleines jsFiddle zur Demonstration:
https://jsfiddle.net/JJaun/o29a4q45/

Die js-Lösung von @JJaun ist nicht perfekt, da man die Höhe springen sieht, wenn man ein Hintergrundbild für die Slides verwendet. Das hat bei mir funktioniert:

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

.slick-slide {
  height: auto;
}

Wie oben beantwortet. Funktioniert gut auf Slick Slider

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

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

Aber ich habe ein Problem bei der Verwendung der Slick-Sync-Navigation

Einfach unter CSS einfügen, um es abzudecken.

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

Hier ist eine reine SCSS-Lösung, wenn Sie damit einverstanden sind object-fit:

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

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

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

Ich habe eine andere reine CSS-Lösung. Sie können schwebende Elemente mit überschreiben 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>

Für zukünftige Suchen:

Sie können einfach verwenden:

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