Changer la hauteur du carrousel lisse

Ici est un violon de la Nappe Carrousel incorporé dans un Bootstrap miniature.

JSFiddle

Comment puis-je faire le carrousel seulement 200px de hauteur et de s'assurer que les images sont mises à l'échelle proportionnellement? Je n'arrive pas à obtenir le carrousel pour s'adapter à l'intérieur d'un conteneur qui est de la hauteur je dis.

REMARQUE: Redimensionner votre navigateur après le chargement de ce violon! Cela fonctionne autour d'un bogue connu dans lequel le plugin de mise en page n'est pas de l'initialisation au chargement de la page. Ce n'est pas la question je suis besoin d'résolu. Ignorer ce problème.

HTML

<div ng-app="slickExampleApp" class="background">
    <div ng-controller="SlickCtrl">
        <div class="inner-container row">
            <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">
                <div ng-repeat="result in results">
                        <slick-carousel
                                    settings="slickConfig"
                                    media="result.images">
                            </slick-carousel>

                        <div class="row">
                            <div class="caption">
                            <h4 class="heading">{{result.heading}}</h4>
                            <p class="body">{{result.body}}</p>
                            <p class="text-center">
                                <a href="#" class="btn btn-default btn-lg" role="button">Place Offer</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JS

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": "[email protected]",
"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&lat=37.759300&lon=-122.483600&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 < l; i++) { if (i in this && 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', "<div class=\"multiple\" ng-repeat=\"m in media\" on-finish-render=\"init()\">\n  <img ng-if=\"isImage({media: m})\" data-lazy=\"{{m.full || m.thumb || m.images}}\"/>\n  <video ng-if=\"isVideo({media: m})\" ng-src=\"{{m.src}}\" type=\"{{m.mimeType}}\" ></video>\n</div>");
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: '&',
isImage: '&',
isVideo: '&'
},
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) >= 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();
};
}
};
}
]);

source d'informationauteur That1guyoverthr