JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
    <div>
        <h2>Fill 200x100</h2>
        <div ng-controller="CarouselController" ng-init='setImages(["http://images2.wikia.nocookie.net/__cb20110811172434/fallingskies/images/f/fd/Totoro_normal.gif","http://images.wikia.com/pokemon/images/archive/4/49/20110526012846!Ash_Pikachu.png","http://images2.wikia.nocookie.net/__cb20111231185621/trigun/images/2/2b/Vash1.jpg"])'>
            <div my-background-image='image' class="wide"></div>
            <div ng-click="prevImage()" class="pointer">Prev</div>
            <div ng-click="nextImage()" class="pointer">Next</div>
            <div ng-click="images.push('http://upload.wikimedia.org/wikipedia/en/5/59/Himura_Kenshin_OVA.jpg');" class="pointer"><em>Add Image</em></div>
        </div>
    </div>
    <div>
        <h2>Fill 100x200</h2>
        <div ng-controller="CarouselController" ng-init='setImages(defaultImages)'>
            <div my-background-image='image' class="tall"></div>
            <div ng-click="prevImage()">Prev</div>
            <div ng-click="nextImage()">Next</div>
        </div>
    </div>
</div>

CSS

div.wide {
    width: 200px;
    height: 100px;
    border: 1px solid orange;
}
div.tall {
    width: 100px;
    height: 200px;
    border: 1px solid orange;
}

.pointer {
    cursor: pointer;
}

JavaScript

angular.
    module('myApp', []).
    directive('myBackgroundImage', function () {
        return function (scope, element, attrs) {
            scope.$watch(attrs.myBackgroundImage, function(v) {
                element.css({
                    'background-image': 'url(' + v + ')',
                    'background-size': 'cover',
                    'background-repeat': 'no-repeat',
                    'background-position': 'center center'
                });
                element.attr('ngClass', 'pointer');
            });
        };
    });

function CarouselController($scope, $timeout) {
    $scope.images = [];
    $scope.image = "";
    $scope.index = 0;
    
    $scope.defaultImages = [
        "http://images2.wikia.nocookie.net/__cb20110811172434/fallingskies/images/f/fd/Totoro_normal.gif",
        "http://fc03.deviantart.net/fs28/i/2009/250/7/4/MUSASHI_MIYAMOTO_by_BARCYD.jpg",
        "http://fc08.deviantart.net/fs71/f/2012/066/3/5/goku_happy_by_kzo-d4s20sy.png"];
    
    $scope.setImages = function(images) {
        $scope.images = images;
        $scope.image = images[0];
        $scope.index = 0;
    };
    
    $scope.nextImage = function() {
        $scope.index = ($scope.index + 1) % $scope.images.length;
        $scope.image = $scope.images[$scope.index];
    };
    
    $scope.prevImage = function() {
        $scope.index = ($scope.index - 1 >= 0 ? $scope.index - 1 : $scope.images.length - 1);
        $scope.image = $scope.images[$scope.index];
    };
    
    var nextImageTimeout = function() {
        $scope.nextImage();
        $timeout(nextImageTimeout, 5 * 1000);
    };
    $timeout(nextImageTimeout, 5 * 1000);    
}