JSFiddle - React, Tailwind, and code Playground

by rapsac

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

        
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-touch.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"></script>
<body ng-app="website" ng-controller="MainCtrl">

<div style="height:400px;">
	MAIN DIV
</div>
<div class="container">
  <i class="fa fa-angle-left fa-5x" style="float:left; margin-top:50px;"  ng-click="prevSlide()"></i>
    <div ng-repeat="slide in slides"
          ng-animate=" 'animate' "
         >
             <img ng-src="{{slide.image}}" style="float:left; padding: 10px;"></img>
	</div>

   
    <i class="fa fa-angle-right fa-5x" style="float:left; margin-top:50px;" ng-click="nextSlide()"></i>
   
</div>


</body>

CSS

.animate-enter {
	-webkit-transition: 1s linear all; /* Chrome */
	transition: 1s linear all;
	opacity: 0;
}
 
.animate-enter.animate-enter-active {
	opacity: 1;
}

JavaScript

angular.module('website', ['ngAnimate','ngRoute'])
    .controller('MainCtrl', function ($scope, $timeout) {
        $scope.slides = [
            {image: 'http://placehold.it/200x150', description: 'Image 00'},
            {image: 'http://placehold.it/200x150', description: 'Image 01'},
            {image: 'http://placehold.it/200x150', description: 'Image 02'}
        ];
		$scope.hidden = false;
        $scope.direction = 'left';
        $scope.currentIndex = 0;

        $scope.setCurrentSlideIndex = function (index) {
            $scope.direction = (index > $scope.currentIndex) ? 'left' : 'right';
            $scope.currentIndex = index;
        };

        $scope.isCurrentSlideIndex = function (index) {
            return $scope.currentIndex === index;
        };

        $scope.prevSlide = function () {
           $scope.slides = [
            {image: 'http://placehold.it/200x150', description: 'Image 00'},
            {image: 'http://placehold.it/200x150', description: 'Image 01'},
            {image: 'http://placehold.it/200x150', description: 'Image 02'}
        ];
        };

        $scope.nextSlide = function () {
		console.log('hi');
           $timeout(function(){
				 $scope.slides = [
            {image: 'http://www.placecage.com/c/200/150', description: 'Image 00'},
            {image: 'http://www.placecage.com/c/200/150', description: 'Image 01'},
            {image: 'http://www.placecage.com/c/200/150', description: 'Image 02'}
        ];
		$scope.hidden = false;
		   }, 500);
        };
    });