JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://www.ascotproject.com/vendor/javascripts/jquery.hammer.js"></script>
<link rel="stylesheet" href="http://www.eyecon.ro/bootstrap-slider/css/bootstrap.css">
<link rel="stylesheet" href="http://www.eyecon.ro/bootstrap-slider/css/slider.css">
<script src="http://www.eyecon.ro/bootstrap-slider/js/bootstrap-slider.js"></script>
<div ng-app="myApp">
    <div>
        <h2>Fill 200x100, wipe left and right</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='images[index]' class="wide" swipe-left="nextImage()" swipe-right="prevImage()"></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, swipe left and right</h2>
        <carousel ng-images='["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"]' />
    </div>
</div>

CSS

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

div#mySlider {
    margin-top: 5px;
    margin-left: 15px;
}

.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'
                });
            });
        };
    }).directive('swipeLeft', function() {
        return function(scope, element, attrs) {
            $(document).ready(function() {
                Hammer(element).on('swipeleft', function() {
                    scope.$eval(attrs.swipeLeft);
                    scope.$apply();
                });
            });
        };
    }).directive('swipeRight', function() {
       return function(scope, element, attrs) {
           $(document).ready(function() {
               Hammer(element).on('swiperight', function() {
                   scope.$eval(attrs.swipeRight);
                   scope.$apply();
               });
           });
        };
    }).directive('bootstrapSlider', function() {
        return function(scope, element, attrs) {
            $(document).ready(function() {
                var init = scope.$eval(attrs.ngModel);
                var min = scope.$eval(attrs.bootstrapSliderMin);
                var max = scope.$eval(attrs.bootstrapSliderMax);
                
                $(element[0]).slider({
                    value : init,
                    min : min,
                    max : max,
                    tooltip : 'hide'
                });
                
                // Update view to reflect model
                scope.$watch(attrs.ngModel, function(v) {
                    $(element[0]).slider('setValue', v);
                });
                
                // Update model to reflect view
                $(element[0]).slider().on('slide',...