Slick carousel adaptive height not working

Slick adaptive height not working

by joshmoto

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
  <div class="slider">
    <div class="aslide">1</div>
    <div class="aslide aslide-2">2<br/>2<br/>2</div>
    <div class="aslide">3</div>
    <div class="aslide">4</div>
    <div class="aslide">5</div>
    <div class="aslide">6</div>
    <div class="aslide">7</div>
    <div class="aslide">8</div>
    <div class="aslide">9</div>
    <div class="aslide">10</div>
    <div class="aslide">11</div>
    <div class="aslide">12</div>
  </div>

CSS

body {
  background: skyblue;
  margin: 0;
  padding: 20px;
}

.aslide {

  background: yellow;
}

.aslide-2 {

}

JavaScript

var options = {
  dots: true,
  arrows: false,
  dotsClass: 'slick-dots slick-dots-black',
  adaptiveHeight: true,
  infinite: true
};

$('.slider').slick(options);