Change height of Slick Carousel

Question

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": "[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();
                };
            }
        };
    }
]);

Fefeal

Answer 1

Answer:

CSS

.slick-slide {
   height:200px;
}

.slick-slide img {
   height:200px;
}

Fefeal

I see what you are doing but can you explain just a bit why you are doing it. – Westbrooks

This works to fix the height but you end up with stretched images when you resize the window. The width is not adapting to the height. – Leticia

Except that this is neither responsive at all nor flexible in case images have to be changed to a different height, so by today it is not really a solution. – Fubsy

You could use object-fit: cover on the images in case they're getting stretched. – Tobe

Answer 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; 
        }
    }

Tamra

Answer 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
 });

Leticia

Answer 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();
});

Abstraction

Answer 5

I have faced the same problem more or less, using images in Slick is tricky. So when I had a webpage on desktop everything was very smooth. But on mobile the slide was to small. The suggestion with scale(2) did not work hence it would make the image bigger then te screen.

After going back and forward I decided, to crop the images to be more vertical instead of horizontal.

Then In Jquery I did:

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");
}

I hope this answer is relevant for those who came here with the same problem.

Cloudlet

Answer 6

Apparently the issue with adaptive height it's a bug as the source code says: https://github.com/kenwheeler/slick/issues/790

Geiss

The adaptive height config only works on single slide carousels as the documentation states at least. kenwheeler.github.io/slick – Fefeal