web-dev-qa-db-fra.com

Changer la hauteur du carrousel lisse

Voici un violon de Slick Carousel intégré dans une vignette Bootstrap. 

JSFiddle

Comment faire pour que le carrousel ne mesure que 200 pixels de haut et que les images soient mises à l'échelle proportionnellement? Je n'arrive pas à insérer le carrousel dans un conteneur à la hauteur de laquelle je dicte.

NOTE: Redimensionnez votre navigateur après avoir chargé ce violon! Cela fonctionne autour d'un bogue connu où la disposition du plug-in n'est pas initialisée au chargement de la page. Ce n'est pas le problème que j'ai besoin de résoudre. Ignorer ce problème.

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
14
That1guyoverthr

Réponse:

CSS

.slick-slide {
   height:200px;
}

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

Essayez de supprimer slidesToScroll de la configuration. La combinaison simple suivante a fonctionné pour moi sans fudgery CSS supplémentaire.

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

Je devais régler la hauteur, par exemple .slick-carousel{width: 200px;}, car la hauteur adaptative ne fonctionnait pas et slick rendait le carrousel aussi haut que le imgs (avant qu'il ne soit redimensionné par css). mais après avoir déconné avec pendant un moment. c'est ce qui fonctionne pour moi.

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

Définissez la hauteur de la division de conteneur à la hauteur souhaitée, par exemple 60%, et la hauteur de la couche et des 2 divisions suivantes à 100%.

EXEMPLE:

CSS: 

.html {
  height: 100%;
}
.slick-container {
  height: 60%;
}
.slick-slider, .slick-list, .slick-track {
  height: 100%;
}

JS: 

$(document).ready(function(){
  $('.slick-slider').slick();
});
3
xxxbence

Apparemment, le problème avec Adaptive Height est un bug car le code source dit: https://github.com/kenwheeler/slick/issues/790

0
ozke