JSFiddle - React, Tailwind, and code Playground

by Andrea Aloi

HTML

<script src="https://code.angularjs.org/1.3.15/angular.min.js"></script>
<body ng-app="myApp" ng-controller="MyCtrl">
    <carousel>
       <img ng-repeat="image in images" ng-src="{{image.src}}" alt=""/>
    </carousel>
</body>

CSS

.carousel {
    height: 0px;
    overflow: hidden;
    transition: 0.3s height;
    text-align: center;
    position: relative;
}

JavaScript

console.clear();

angular.module("myApp", [])
.controller("MyCtrl", ["$scope", function($scope) {
    $scope.images = [
        {src: "http://upload.wikimedia.org/wikipedia/commons/c/c0/Gingerbread_House_Essex_CT.jpg"},
        {src: "http://hookedonhouses.net/wp-content/uploads/2009/01/Father-of-the-Bride-Lookalike-house.jpg"},
        {src: "http://www.effeconsulting.net/wp-content/uploads/2014/09/Beautiful-Houses-Week32_E4-House-by-DADA-Partners_01.jpg"}
    ];
}])
.directive("carousel", ["$timeout", function($timeout) {
        return {
            restrict: "E",
            transclude: true,
            template: "<div class=\"carousel\" ng-transclude></div>",
            link: function(scope, element, attrs) {
                $timeout(function() {
                    var div = element.children();
                    $timeout(function() {
                        var images = div.children();
                        var minHeight = Math.min.apply(null, _.pluck(images, "height"));
                        angular.forEach([div, images], function(e) {
                            e.css({
                                height: minHeight + "px"
                            });
                        });
                    }, 100);
                }, 100);
            }
        }
    }]);