JSFiddle - React, Tailwind, and code Playground

by gogirl

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>
<div ng-app="myApp">
    <div>
        <h2>Fill 200x100, swipe left and right</h2>
        <div ng-controller="CarouselController" ng-init='setImages(initImages)'>
            <div my-cropped-image='image' 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(base+'klematis4_small.jpg');" class="pointer"><em>Add Image</em></div>
        </div>
    </div>
    <div>
        <h2>Fill 100x200, swipe left only</h2>
        <div ng-controller="CarouselController" ng-init='setImages(defaultImages)'>
            <div my-cropped-image='image' class="tall" swipe-left="nextImage()"></div>
            <div ng-click="prevImage()" class="pointer">Prev</div>
            <div ng-click="nextImage()" class="pointer">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('myCroppedImage', function () {
        return function (scope, element, attrs) {
            scope.$watch(attrs.myCroppedImage, function(img) {
                element.css({
                    'background-image': 'url(' + img + ')',
                    '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();
               });
           });
        };
    });

function CarouselController($scope, $timeout) {
    $scope.images = [];
     $scope.image = "";
    $scope.index = 0;
    $scope.base = "http://www.w3schools.com/css/";
    $scope.initImages = [$scope.base+"klematis_small.jpg",$scope.base+"klematis2_small.jpg",$scope.base+"klematis3_small.jpg"];
    $scope.defaultImages = [$scope.base+"klematis4_small.jpg",$scope.base+"klematis3_small.jpg"];
    
    $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);
 ...