JSFiddle - React, Tailwind, and code Playground

by koljada

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-animate.min.js"></script>
<body ng-app="sliderApp">
    <div ng-controller="SliderController">
         <h1>Slider Using AngularJS</h1>

        <slider images="images"></slider>
    </div>
</body>

CSS

* {
    font-family:'Open Sans', sans-serif;
}
.center-grey {
    background: #f2f2f2;
}
.slider {
    position: relative;
    padding: 5px;
    width: 410px;
    margin: auto;
    margin-top: 40px;
}
.slide {
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 0px 0px 15px #999;
}
.arrows {
    position: absolute;
    top: 10px;
    right: 20px;
}
.arrows img {
    height: 32px;
}
h1 {
    text-align: center;
    padding: 10px;
    font-size: 40px;
    color: #222;
}
.slide.ng-hide-add, .slide.ng-hide-remove {
    -webkit-transition: all linear 0.5s;
    -moz-transition: all linear 0.5s;
    -o-transition: all linear 0.5s;
    transition: all linear 0.5s;
    display: block!important;
}
.slide.ng-hide-add.ng-hide-add-active, .slide.ng-hide-remove {
    opacity: 0;
}
.slide.ng-hide-add, .slide.ng-hide-remove.ng-hide-remove-active {
    opacity: 1;
}

JavaScript

var sliderApp = angular.module('sliderApp', ['ngAnimate']);

 sliderApp.directive('slider', function ($interval,$log) {
     return {
         restrict: 'AE',
         replace: true,
         scope: {
             images: '='
         },
         link: function (scope, elem, attrs) {
             scope.currentIndex = 0;                           
              var timer = $interval(function () {
                     scope.changeImage();
              }, 5000);             
             scope.next = function () {                 
                    $interval.cancel(timer);
                    timer = $interval(function () {
                     scope.changeImage();
                    }, 5000);                 
             };
         scope.changeImage = function () {
                 $log.debug('tick');
                 scope.currentIndex < scope.images.length - 1 ? scope.currentIndex++ : scope.currentIndex = 0;
             };

             scope.prev = function () {
                 scope.currentIndex > 0 ? scope.currentIndex-- : scope.currentIndex = scope.images.length - 1;
             };

             scope.$watch('currentIndex', function () {
                 scope.images.forEach(function (image) {
                     image.visible = false; // make every image invisible
                 });

                 scope.images[scope.currentIndex].visible = true; // make the current image visible
             });


             scope.$on('$destroy', function () {
                 $interval.cancel(timer); // when the scope is getting destroyed, cancel the timer
             });
         },
         template: '<div class="slider"><div class="slide" ng-repeat="image in images" ng-show="image.visible"><img ng-src="{{image.src}}" /></div><div class="arrows"><a href="#" ng-click="prev()"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-left-128.png" /></a><a href="#" ng-click="next(false)"><img...