更改 Slick Carousel 的高度

Question

更改 Slick Carousel 的高度

21

这里有一个内嵌在Bootstrap缩略图中的Slick Carousel代码段。 JSFiddle 如何将轮播高度限制为200px并确保图像按比例缩放？我似乎无法让轮播适应我指定高度的容器。

注意：在加载此代码段后，请调整浏览器大小！这可以解决一个已知错误，即插件布局未在页面加载时初始化。这不是我需要解决的问题，请忽略此问题。

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>

JavaScript

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&amp;lat=37.759300&amp;lon=-122.483600&amp;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();
                };
            }
        };
    }
]);

- That1guyoverthr

6个回答

10

我不得不设置高度，例如.slick-carousel{width: 200px;}，因为自适应高度不起作用，而且Slick会使轮播图像的高度与img一样高（在被CSS调整大小之前）。但是经过一段时间的尝试后，这就是对我有效的方法。

    .slick-slide{
        display: none;
        float: left;
        height: auto;
        min-height: 1px;
        img{
            max-width: 100vw !important; 
        }
    }

- Omar

9

尝试从配置中移除slidesToScroll。以下简单的组合对我来说已经有效，不需要额外的CSS修改。

$('.slick-carousel').slick({
     variableWidth: true,
     centerMode: true
 });

- MarcGuay

4

将容器div的高度设置为所需的高度，例如60％，并将slick和下面的两个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();
});

- xxxbence

1

我遇到了类似的问题，使用Slick中的图像比较棘手。因此，在桌面上浏览网页时一切都很顺利。但是在移动设备上，幻灯片太小了。缩放（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");
}

我希望这个答案对于那些遇到相同问题的人有所帮助。

- user3806549

0

显然，自适应高度的问题是一个bug，因为源代码上说： https://github.com/kenwheeler/slick/issues/790

- ozke

1

自适应高度的配置仅在单张幻灯片轮播上工作，正如文档所述。http://kenwheeler.github.io/slick/ - That1guyoverthr

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- That1guyoverthr · Accepted Answer

30

答案：

CSS

.slick-slide {
   height:200px;
}

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

- That1guyoverthr

10

我了解你正在做什么，但能否稍微解释一下为什么要这样做呢？ - MZaragoza

3

这个方法可以解决高度的问题，但是当你调整窗口大小时，图片会被拉伸。宽度无法根据高度进行自适应。 - MarcGuay

3

除此之外，这并不完全响应，而且如果需要更改图片的高度，它也缺乏灵活性，因此到今天为止它并不是一个真正的解决方案。 - Tritof

1

如果图像被拉伸，您可以在图像上使用 object-fit: cover。 - Dop4miN