Slick Carousel - Force Slides to Have the Same Height

Slick carousel - force slides to have the same height

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

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

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

Enjoy! :-)

How to adjust the height of slides in Slick slideshow to be equal?

Add this:

.simple cite {
  margin: 0 auto;
}
  .slick-track {
    display:flex;
  }

.carousel {
    height:inherit;
  }

That should work fine.

How can I change the width and height of slides on Slick Carousel?

I made this plugin. There is some css interference taking place.

It's your border on the slider itself. Either use

box-sizing: border-box 

to absorb the border width, or put the border on the content inside the slide.

Slick js make the slick slide to grow to match the parent sibling height

I figured this out.

$('.offers-slick-main').on('afterChange', function(event, slick, currentSlide, nextSlide) {
  var $loginLogoutWideContainer = $('.row.hero-content'),      $loginLogoutWideContainerHeight = $loginLogoutWideContainer.height(),      $slideSelection = $(slick.$slides.get(currentSlide)),      $slideSelectionHeight = $slideSelection.height();
  if ($slideSelectionHeight < $loginLogoutWideContainerHeight) {    $slideSelection.height(($loginLogoutWideContainerHeight - 60) + 'px'); //60 is the height of the navigation buttons    $slickOffersWrapperWide.slick('resize');  }
});