更改 Slick Carousel 的高度
Posted
技术标签:
【中文标题】更改 Slick Carousel 的高度【英文标题】：Change height of Slick Carousel 【发布时间】：2015-02-25 09:05:44 【问题描述】：这是嵌入在 Bootstrap 缩略图中的 Slick Carousel 的小提琴。
JSFiddle
如何使轮播仅 200 像素高并确保图像按比例缩放？我似乎无法让旋转木马装入我指定高度的容器中。
注意：加载此小提琴后调整浏览器大小！这可以解决插件布局在页面加载时未初始化的已知错误。这不是我需要解决的问题。忽略这个问题。
<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】：我或多或少遇到过同样的问题，在 Slick 中使用图像很棘手。所以当我在桌面上有一个网页时，一切都非常顺利。但是在移动设备上，幻灯片很小。 scale(2) 的建议不起作用，因此它会使图像比屏幕大。
来回后，我决定将图像裁剪为更垂直而不是水平。
然后在 Jquery 中我做了：
if ($(window).width() < 820)
$("#slide-1").prop("src", "/slide1-resp.png");
$("#slide-2").prop("src", "/slide2-resp.png");
$("#slide-3").prop("src", "/slide3-resp.png");
我希望这个答案对那些来到这里遇到同样问题的人来说是相关的。
【讨论】：
【参考方案2】：我不得不设置高度，例如.slick-carouselwidth: 200px;，因为自适应高度不起作用，而且光滑的旋转木马使旋转木马和imgs 一样高（在它被css调整大小之前）。但在搞砸了一段时间之后。这对我有用。
.slick-slide
display: none;
float: left;
height: auto;
min-height: 1px;
img
max-width: 100vw !important;
【讨论】：
【参考方案3】：将容器 div 的高度设置为所需的高度，例如 60%，然后将 slick 和 2 以下 div 的高度设置为 100%。
示例：
CSS：
.html
height: 100%;
.slick-container
height: 60%;
.slick-slider, .slick-list, .slick-track
height: 100%;
JS：
$(document).ready(function()
$('.slick-slider').slick();
);
【讨论】：
【参考方案4】：尝试从配置中删除 slidesToScroll。以下简单的组合对我有用，没有任何额外的 CSS 捏造。
$('.slick-carousel').slick(
variableWidth: true,
centerMode: true
);
【讨论】：
【参考方案5】：答案：
CSS
.slick-slide
height:200px;
.slick-slide img
height:200px;
【讨论】：
我知道你在做什么，但你能解释一下你为什么这样做吗？ 这可以固定高度，但是当您调整窗口大小时，您最终会得到拉伸的图像。宽度不适应高度。 除了这既不响应也不灵活，以防万一图像必须更改为不同的高度，所以到今天它还不是一个真正的解决方案。 您可以在图像上使用object-fit: cover，以防它们被拉伸。【参考方案6】：
显然，自适应高度的问题是源代码所说的错误： https://github.com/kenwheeler/slick/issues/790
【讨论】：
如文档所述，自适应高度配置仅适用于单张幻灯片轮播。 kenwheeler.github.io/slick以上是关于更改 Slick Carousel 的高度的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Bootstrap 3 Carousel 中更改滑动动画以淡入/淡出过渡
angular 11 的“npm i ngx-slick-carousel”出现错误
如何在 ngx-slick-carousel 中添加带有内容而不是图像的 div
Slick Carousel Uncaught TypeError: $(...).slick is not a function