JSFiddle - React, Tailwind, and code Playground

by saurabh agrawal

HTML

<!DOCTYPE html>
<html>

<head>
	<script data-require="[email protected]" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
	<script type="text/javascript">
		angular.module("app",[])
		.controller("ctrl",function($scope, $timeout){
			$scope.data = [{
				"id": 1,
				"path": "Content/Banner/banner.jpg"
			},
			{
				"id": 2,
				"path": "Content/Banner/banner1.jpg"
			},
			{
				"id": 3,
				"path": "Content/Banner/banner2.jpg"
			},
			{
				"id": 4,
				"path": "Content/Banner/banner3.jpg"
			}]


			var k = Math.floor(Math.random() * 4) + 1;

			$scope.image = $scope.data[k-1].path;
			var obj = $scope.data[k];
			setImage();

			function setImage(argument) {
				
				$timeout(function () {
					if (obj.path) {
						if (obj.id >$scope.data.length) {
							$scope.image = getImage(obj.id);
							obj.id = 1;
						}else{
							$scope.image = getImage(obj.id);
							obj.id ++;
						}
					}else{
						$scope.image = "invalid id";
					}

					 setImage();
					}, 5000)
			};

			function getImage(id) {
				for (var i = $scope.data.length - 1; i >= 0; i--) {
					if ($scope.data[i].id == id) {
						return $scope.data[i].path;
					}
				}
			}


		})
	</script>
</head>

<body>
	<div ng-app="app" ng-controller="ctrl">
		{{image}}
		<button ng-click="clear()">clear</button>
	</div>
</body>

</html>