问题
Here is a fiddle of Slick Carousel embedded in a Bootstrap thumbnail.
JSFiddle
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.
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.
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": "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&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();
};
}
};
}
]);
回答1:
Answer:
CSS
.slick-slide {
height:200px;
}
.slick-slide img {
height:200px;
}
回答2:
I was having to set the height eg .slick-carousel{width: 200px;} because adaptive height wasnt working and slick was making the carousel as tall as the imgs (before it was resized by css). but after messing around with it for a while. this is what works for me.
.slick-slide{
display: none;
float: left;
height: auto;
min-height: 1px;
img{
max-width: 100vw !important;
}
}
回答3:
Try removing slidesToScroll from the config. The following simple combination worked for me without any additional CSS fudgery.
$('.slick-carousel').slick({
variableWidth: true,
centerMode: true
});
回答4:
Set the container div's height to the desired height for example 60% and the slick's and the 2 following div's height to 100%.
EXAMPLE:
CSS:
.html {
height: 100%;
}
.slick-container {
height: 60%;
}
.slick-slider, .slick-list, .slick-track {
height: 100%;
}
JS:
$(document).ready(function(){
$('.slick-slider').slick();
});
回答5:
Apparently the issue with adaptive height it's a bug as the source code says: https://github.com/kenwheeler/slick/issues/790
来源：https://stackoverflow.com/questions/27684458/change-height-of-slick-carousel