9
Hier ist eine Fiddle von Slick Carousel, die in ein Bootstrap-Thumbnail eingebettet ist.Höhe des Slick Karussells ändern
Wie kann ich das Karussell nur 200px groß zu machen und sicherzustellen, dass die Bilder proportional skaliert werden? Ich kann nicht scheinen, das Karussell in einen Container zu passen, dessen Höhe ich diktiere.
HINWEIS: Ändern Sie die Größe Ihres Browsers nach dem Laden dieser Geige! Dies funktioniert um einen bekannten Fehler herum, bei dem das Plugin-Layout beim Laden der Seite nicht initialisiert wird. Dies ist nicht das Problem, das ich gelöst brauche. Ignoriere dieses Problem.
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();
};
}
};
}
]);
Die adaptive Höhenkonfiguration funktioniert nur auf einzelnen Objektträgerkarussellen, wie die Dokumentation zumindest sagt. http://kenwheeler.github.io/slick/ – That1guyoverthr