danielyewright/app.js

## app.js
var myApp = angular.module('myApp', []);

myApp.controller('SlideshowCtrl', ['$scope',
    function ($scope) {
        $scope.images = [
            {
                src: 'img_nature_wide.jpg',
                title: 'Caption One'
            },
            {
                src: 'img_snow_wide.jpg',
                title: 'Caption Two'
            },
            {
                src: 'img_mountains_wide.jpg',
                title: 'Caption Three'
            }
        ];
    }
]);

myApp.directive('slideshow', ['$timeout',
    function ($timeout) {
        return {
            restrict: 'AE',
            replace: true,
            scope: {
                images: '='
            },
            templateUrl: 'template.html',
            link: function (scope, elem, attrs) {
                scope.currentIndex = 0;

                scope.nextSlide = function() {
                    scope.currentIndex < scope.images.length - 1 ? scope.currentIndex++ : scope.currentIndex = 0;
                }

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

                scope.dotNav = function(index) {
                    scope.currentIndex = index;
                }

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

                    scope.images[scope.currentIndex].visible = true;
                });

                var timer;
                var sliderFunc = function() {
                    timer = $timeout(function() {
                        scope.nextSlide();
                        timer = $timeout(sliderFunc, 3000);
                    }, 3000);
                };
                sliderFunc();

                scope.$on('$destroy', function() {
                    $timeout.cancel(timer);
                });
            }
        }
    }
]);

## css.css
* {
  box-sizing: border-box;
}

body {
  font-family: Verdana, sans-serif;
  margin:0;
}

img {
  vertical-align: middle;
}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev-slide,
.next-slide {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next-slide {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a white background color with a little bit see-through */
.prev-slide:hover,
.next-slide:hover {
  background-color: rgba(255,255,255,0.5);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active,
.dot:hover {
  background-color: #717171;
}

.inactive {
  background-color: #bbb;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev-slide,
  .next-slide,
  .text {font-size: 11px}
}

## index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp" ng-controller="SlideshowCtrl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css.css">
</head>
<body>
    <div slideshow images="images"></div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

## template.html
<div>
    <div class="slideshow-container">
        <div class="fade" ng-repeat="image in images" ng-show="image.visible">
            <div class="numbertext">{{$index + 1}} / {{images.length}}</div>
            <img ng-src="{{image.src}}" style="width:100%">
            <div class="text">{{image.title}}</div>
        </div>

        <a class="prev-slide" ng-click="prevSlide()">&#10094;</a>
        <a class="next-slide" ng-click="nextSlide()">&#10095;</a>
    </div>
    <br>
    <div style="text-align:center">
        <span class="dot" ng-repeat="dot in images track by $index" ng-class="{'active' : dot.visible}" ng-click="dotNav($index)"></span>
    </div>
</div>
	var myApp = angular.module('myApp', []);

	myApp.controller('SlideshowCtrl', ['$scope',
	function ($scope) {
	$scope.images = [
	{
	src: 'img_nature_wide.jpg',
	title: 'Caption One'
	},
	{
	src: 'img_snow_wide.jpg',
	title: 'Caption Two'
	},
	{
	src: 'img_mountains_wide.jpg',
	title: 'Caption Three'
	}
	];
	}
	]);

	myApp.directive('slideshow', ['$timeout',
	function ($timeout) {
	return {
	restrict: 'AE',
	replace: true,
	scope: {
	images: '='
	},
	templateUrl: 'template.html',
	link: function (scope, elem, attrs) {
	scope.currentIndex = 0;

	scope.nextSlide = function() {
	scope.currentIndex < scope.images.length - 1 ? scope.currentIndex++ : scope.currentIndex = 0;
	}

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

	scope.dotNav = function(index) {
	scope.currentIndex = index;
	}

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

	scope.images[scope.currentIndex].visible = true;
	});

	var timer;
	var sliderFunc = function() {
	timer = $timeout(function() {
	scope.nextSlide();
	timer = $timeout(sliderFunc, 3000);
	}, 3000);
	};
	sliderFunc();

	scope.$on('$destroy', function() {
	$timeout.cancel(timer);
	});
	}
	}
	}
	]);
	* {
	box-sizing: border-box;
	}

	body {
	font-family: Verdana, sans-serif;
	margin:0;
	}

	img {
	vertical-align: middle;
	}

	/* Slideshow container */
	.slideshow-container {
	max-width: 1000px;
	position: relative;
	margin: auto;
	}

	/* Next & previous buttons */
	.prev-slide,
	.next-slide {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 16px;
	margin-top: -22px;
	color: white;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
	}

	/* Position the "next button" to the right */
	.next-slide {
	right: 0;
	border-radius: 3px 0 0 3px;
	}

	/* On hover, add a white background color with a little bit see-through */
	.prev-slide:hover,
	.next-slide:hover {
	background-color: rgba(255,255,255,0.5);
	}

	/* Caption text */
	.text {
	color: #f2f2f2;
	font-size: 15px;
	padding: 8px 12px;
	position: absolute;
	bottom: 8px;
	width: 100%;
	text-align: center;
	}

	/* Number text (1/3 etc) */
	.numbertext {
	color: #f2f2f2;
	font-size: 12px;
	padding: 8px 12px;
	position: absolute;
	top: 0;
	}

	/* The dots/bullets/indicators */
	.dot {
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
	}

	.active,
	.dot:hover {
	background-color: #717171;
	}

	.inactive {
	background-color: #bbb;
	}

	/* Fading animation */
	.fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 1.5s;
	animation-name: fade;
	animation-duration: 1.5s;
	}

	@-webkit-keyframes fade {
	from {opacity: .4}
	to {opacity: 1}
	}

	@keyframes fade {
	from {opacity: .4}
	to {opacity: 1}
	}

	/* On smaller screens, decrease text size */
	@media only screen and (max-width: 300px) {
	.prev-slide,
	.next-slide,
	.text {font-size: 11px}
	}
	<!DOCTYPE html>
	<html lang="en" ng-app="myApp" ng-controller="SlideshowCtrl">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" href="css.css">
	</head>
	<body>
	<div slideshow images="images"></div>

	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
	<script src="app.js"></script>
	</body>
	</html>
	<div>
	<div class="slideshow-container">
	<div class="fade" ng-repeat="image in images" ng-show="image.visible">
	<div class="numbertext">{{$index + 1}} / {{images.length}}</div>
	<img ng-src="{{image.src}}" style="width:100%">
	<div class="text">{{image.title}}</div>
	</div>

	<a class="prev-slide" ng-click="prevSlide()">❮</a>
	<a class="next-slide" ng-click="nextSlide()">❯</a>
	</div>
	<br>
	<div style="text-align:center">
	<span class="dot" ng-repeat="dot in images track by $index" ng-class="{'active' : dot.visible}" ng-click="dotNav($index)"></span>
	</div>
	</div>