JSFiddle - React, Tailwind, and code Playground

by hemedani

HTML

<body ng-app="sliderApp">
    <div ng-controller="SliderController"></div>
  <h1>Slider Using AngularJS</h1>
  <slider images="images" />
</body>

CSS

* {
  font-family: 'Open Sans', sans-serif;
}
.center-grey {
  background: #f2f2f2;
}
.slider {
  position: relative;
  padding: 5px;
  width: 610px;
  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

(function () {
	'use strict';
    var sliderApp = angular.module('sliderApp', ['ngAnimate']);
    
	sliderApp.directive('slider', function ($timeout) {
		return {
			restrict: 'AE',
			replace: true,
			scope: {
				images: '='
			},
			link: function (scope, elem, attrs) {
				scope.currentIndex = 0; 
				var timer;
				var sliderFunc = function () {
					timer = $timeout(function () {
						scope.next(true);
					}, 5000);
				};

				sliderFunc();
				scope.next = function (setTimeoutToNext) {
					scope.currentIndex < scope.images.length - 1 ? scope.currentIndex++ : scope.currentIndex = 0;
					if (setTimeoutToNext) {
						timer = $timeout(sliderFunc, 5000);
					}
				};

				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 () {
					$timeout.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 src="http://rgartists.com/wp-content/uploads/2014/04/icon-ios7-arrow-right-128.png" /></a></div></div>'
		};
	});
    sliderApp.controller('SliderController', function($scope) {
      $scope.images = [{
        src: 'http://lorempixel.com/400/200/sports/1',
        title: 'Pic 1'
      }, {
        src: 'http://lorempixel.com/400/200/sports/2',
        title: 'Pic 2'
      }, {
        src: 'http://lorempixel.com/400/200/sports/3',
       ...