title: Change height of Slick Carousel
body: <p>Here is a fiddle of Slick Carousel embedded in a Bootstrap thumbnail.  </p>
  
  <p><a href="http://jsfiddle.net/bnbq7nq4/2/" rel="noreferrer"><strong>JSFiddle</strong></a></p>
  
  <p>How can I make the carousel only 200px tall and ensure that the images are scaled proportionally?  I can't seem to get the carousel to fit inside a container who's height I dictate.</p>
  
  <p><strong>NOTE: Resize your browser after loading this fiddle! This works around a known bug where the plugin layout is not initializing on page load.  This is not the issue I'm needing solved.  Ignore this issue.</strong></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div ng-app="slickExampleApp" class="background"&gt;
      &lt;div ng-controller="SlickCtrl"&gt;
          &lt;div class="inner-container row"&gt;
              &lt;div class="thumbnail col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1"&gt;
                  &lt;div ng-repeat="result in results"&gt;
                          &lt;slick-carousel
                                      settings="slickConfig"
                                      media="result.images"&gt;
                              &lt;/slick-carousel&gt;
  
                          &lt;div class="row"&gt;
                              &lt;div class="caption"&gt;
                              &lt;h4 class="heading"&gt;{{result.heading}}&lt;/h4&gt;
                              &lt;p class="body"&gt;{{result.body}}&lt;/p&gt;
                              &lt;p class="text-center"&gt;
                                  &lt;a href="#" class="btn btn-default btn-lg" role="button"&gt;Place Offer&lt;/a&gt;
                              &lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var app = angular.module('slickExampleApp', ['slick']);
  
  app.controller('SlickCtrl', function ($scope) {
  
          $scope.slickConfig = {
              dots: true,
              lazyLoad: 'progressive',
              infinite: true,
              speed: 100,
              slidesToScroll: 1,
              //adaptiveHeight: true,
              //TODO: Track this bug to allow for variableWidth on next release: https://github.com/kenwheeler/slick/issues/790
              variableWidth: true,
              onInit: function () {
                  jQuery(window).resize();
                  console.log('slickcaroseal locded');
              },
              centerMode: true
  
          };
  
  
          $scope.results = [
                  {
                      "annotations": {
                          "latlong_source": "In Posting",
                          "proxy_ip": "107.191.98.50:22225",
                          "source_account": "rmk8g-4822965821@sale.craigslist.org",
                          "source_cat": "sss",
                          "source_continent": "USA",
                          "source_heading": "\" Kennedy Machinists 8 Drawer Roller Cabinet,  Kennedy Combination Set",
                          "source_loc": "sfbay",
                          "source_map_google": "https://maps.google.com/maps/preview/@37.759300,-122.483600,16z",
                          "source_map_yahoo": "http://maps.yahoo.com/#mvt=m&amp;amp;lat=37.759300&amp;amp;lon=-122.483600&amp;amp;zoom=16",
                          "source_neighborhood": "inner sunset / UCSF",
                          "source_state": "California",
                          "source_subcat": "tla|tls",
                          "source_subloc": "sfc"
                      },
                      "body": "\n \" Kennedy Machinists 8 Drawer Roller Cabinet, and Kennedy Combination and Machinist Chest Set with keys\".\nVery good condition. Asking Whole set for $875 or Best Offer (REASONABLE!!!!!).\nPlease email with your contact phone number if you are interest and SERIOUS buyer. Thanks.\n ",
                      "category": "STOO",
                      "category_group": "SSSS",
                      "external_id": "4822965821",
                      "external_url": "http://sfbay.craigslist.org/sfc/tls/4822965821.html",
                      "heading": " Kennedy Machinists 8 Drawer Roller Cabinet,  Kennedy Combination Set",
                      "images": [
                          {
                              "full": "http://images.craigslist.org/00707_cwYj2bMonC8_600x450.jpg"
                          },
                          {
                              "full": "http://images.craigslist.org/00w0w_8b36BjRL4YM_600x450.jpg"
                          },
                          {
                              "full": "http://images.craigslist.org/00U0U_6MKF9DWjRfM_600x450.jpg"
                          },
                          {
                              "full": "http://images.craigslist.org/00d0d_4bX1cj3aIrf_600x450.jpg"
                          },
                          {
                              "full": "http://images.craigslist.org/00B0B_8i444xC2DKt_600x450.jpg"
                          },
                          {
                              "full": "http://images.craigslist.org/00F0F_1CnjxJRlvXt_600x450.jpg"
                          }
                      ],
                      "location": {
                          "accuracy": 8,
                          "city": "USA-SFO-SNF",
                          "country": "USA",
                          "county": "USA-CA-SAF",
                          "geolocation_status": 3,
                          "lat": "37.7593",
                          "locality": "USA-SFO-OUS",
                          "long": "-122.4836",
                          "metro": "USA-SFO",
                          "region": "USA-SFO-SAF",
                          "state": "USA-CA",
                          "zipcode": "USA-94122"
                      },
                      "price": 875,
                      "source": "CRAIG",
                      "timestamp": 1419808764
                  }
              ];
  
  });
  
  
  
  
  //Custom implementation of https://github.com/kbdaitch/angular-slick-carousel
  //Var needed for slick carousel directives below.
  __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i &lt; l; i++) { if (i in this &amp;&amp; this[i] === item) return i; } return -1; };
  
  
  app.directive('onFinishRender', function() {
      return {
          restrict: 'A',
          link: function(scope, element, attr) {
              if (scope.$last === true) {
                  return scope.$evalAsync(attr.onFinishRender);
              }
          }
      };
  });
  
  app.directive('slickCarousel', [
      '$timeout', '$templateCache', function($timeout, $templateCache) {
          var SLICK_FUNCTION_WHITELIST, SLICK_OPTION_WHITELIST, isEmpty;
          $templateCache.put('angular-slick-carousel/template.html', "&lt;div class=\"multiple\" ng-repeat=\"m in media\" on-finish-render=\"init()\"&gt;\n  &lt;img ng-if=\"isImage({media: m})\" data-lazy=\"{{m.full || m.thumb || m.images}}\"/&gt;\n  &lt;video ng-if=\"isVideo({media: m})\" ng-src=\"{{m.src}}\" type=\"{{m.mimeType}}\" &gt;&lt;/video&gt;\n&lt;/div&gt;");
          SLICK_OPTION_WHITELIST = ['accessiblity', 'autoplay', 'autoplaySpeed', 'arrows', 'cssEase', 'dots', 'draggable', 'fade', 'easing', 'infinite', 'lazyLoad', 'onBeforeChange', 'onAfterChange', 'pauseOnHover', 'responsive', 'slide', 'slidesToShow', 'slidesToScroll', 'speed', 'swipe', 'touchMove', 'touchThreshold', 'vertical'];
          SLICK_FUNCTION_WHITELIST = ['slickGoTo', 'slickNext', 'slickPrev', 'slickPause', 'slickPlay', 'slickAdd', 'slickRemove', 'slickFilter', 'slickUnfilter', 'unslick'];
          isEmpty = function(value) {
              var key;
              if (angular.isArray(value)) {
                  return value.length === 0;
              } else if (angular.isObject(value)) {
                  for (key in value) {
                      if (value.hasOwnProperty(key)) {
                          return false;
                      }
                  }
              }
              return true;
          };
          return {
              scope: {
                  settings: '=',
                  control: '=',
                  media: '=',
                  onDirectiveInit: '&amp;',
                  isImage: '&amp;',
                  isVideo: '&amp;'
              },
              templateUrl: function(tElement, tAttrs) {
                  if (tAttrs.src) {
                      return tAttrs.src;
                  }
                  return 'angular-slick-carousel/template.html';
              },
              restrict: 'AE',
              terminal: true,
              link: function(scope, element, attr) {
                  var options;
                  if (typeof attr.isImage !== 'function') {
                      scope.isImage = function(params) {
                          //TODO: Should evaluate mimetype of image.. grrrr
                          //Here is original code
                          //return params.media.mimeType === 'image/png' || params.media.mimeType === 'image/jpeg';
                          return true;
                      };
                  }
                  if (typeof attr.isVideo !== 'function') {
                      scope.isVideo = function(params) {
                          return params.media.mimeType === 'video/mp4';
                      };
                  }
                  options = scope.settings || {};
                  angular.forEach(attr, function(value, key) {
                      if (__indexOf.call(SLICK_OPTION_WHITELIST, key) &gt;= 0) {
                          return options[key] === scope.$eval(value);
                      }
                  });
                  scope.init = function() {
                      var slick;
                      slick = element.slick(options);
                      scope.internalControl = scope.control || {};
                      SLICK_FUNCTION_WHITELIST.forEach(function(value) {
                          scope.internalControl[value] = function() {
                              slick[value].apply(slick, arguments);
                          };
                      });
                      scope.onDirectiveInit();
                  };
              }
          };
      }
  ]);
  </code></pre>