web-dev-qa-db-ja.com

スリックカルーセルの高さを変更する

Bootstrapサムネイルに埋め込まれたSlick Carouselのフィドルです。

JSFiddle

カルーセルの高さを200ピクセルのみにし、画像が比例して拡大縮小されるようにするにはどうすればよいですか？私が指示した高さのコンテナ内にカルーセルを収めることはできません。

注：このフィドルを読み込んだ後、ブラウザのサイズを変更してください！これは、プラグインレイアウトがページの読み込み時に初期化されないという既知のバグを回避します。これは私が解決する必要がある問題ではありません。この問題は無視してください。

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&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();
                };
            }
        };
    }
]);
cssangularjstwitter-bootstrap-3slick.js
16
That1guyoverthr

回答：

CSS

.slick-slide {
   height:200px;
}

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

高さを設定する必要がありました。例：.slick-carousel{width: 200px;}適応型の高さは機能していなかったため、滑らかな回転でimgs（cssによってサイズ変更される前）と同じ高さになりました。しかし、しばらくそれをいじってから。これは私のために働くものです。

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

構成からslidesToScrollを削除してみてください。次の単純な組み合わせは、CSSを追加することなく機能しました。

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

コンテナdivの高さを、たとえば60%とスリック、それに続く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
xxxbence

どうやら適応高さの問題はソースコードが言っているようにバグです： https://github.com/kenwheeler/slick/issues/79

0
ozke