<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<img src={{slide_image}} />
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
var slide_images = ["image_1.jpeg","image_2.jpeg","image_3.jpeg","image_4.jpeg"];
$scope.slide_image = slide_images[0];
var i=1;
$interval(function () {
$scope.slide_image = slide_images[i%slide_images.length];
i++;
}, 1000);
});
</script>
</body>
</html>
The rest is css
To do more such as add text, change animation etc. make $scope.slide_images an array of objects with the properties you want. Each object can then contain its own: image, style, behavior etc you can go crazy with customization..
The above code is here as a demo
I am new to using angularjs and I wanted to try it out by using it to create a continuous slideshow of content. I was able to get the slide to work for about a day by using a contributor on this site as a reference.
However the next day I began working on it the slide stopped working. My images wouldn’t even display. After fiddling with the code I found that removing “ng-app” from the html tag allowed the images to appear again but still the code will not run.
Code is below:
<!DOCTYPE html>
<html lang="en" ng-app="myApp" ng-controller="AppCtrl as app" >
<head>
<link href="css/test.css" rel="stylesheet">
<script data-require="[email protected]"src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="app.js"></script>
<style>
.evt-title {
position: absolute;
z-index: 1;
left: 38%;
font-family: 'Roboto Slab', sans-serif;
font-size: 1.75rem;
top: -15px;
}
.evtslide {
/*width:100%;
height:400px;
margin: 0 auto;
margin-bottom: 20px;
overflow:hidden;
position:relative;*/
right: 0;
height: 690px;
width: 26.7%;
float: right;
position: absolute;
overflow: hidden;
}
.evtslide .slider-content {
position: absolute;
width: 100%;
height: 690px;
background: url("../images/bluebg2.png");
background-size: 100%;
background-repeat: no-repeat;
}
.evtslide .slider-content2 {
position: absolute;
width: 100%;
height: 690px;
background: url("../images/graybg2.png");
background-size: 100%;
background-repeat: no-repeat;
}
.animate-enter, .animate-leave {
-webkit-transition: 1000ms cubic-bezier(0.165, 0.84, 0.44, 1) all;
transition: 1000ms cubic-bezier(0.165, 0.84, 0.44, 1) all;
}
.animate-enter {
left: 100%;
}
.animate-enter.animate-enter-active {
left: 0;
}
.animate-leave {
left: 0;
}
.animate-leave.animate-leave-active {
left: -100%;
}
/*# sourceMappingURL=test.css.map */
</style
</head>
<body>
<div ng-controller="slideShowController" class="evtslide" ng-switch='slideshow' ng-animate="'animate'">
<div class="slider-content" ng-switch-when="1">
<h3 class="evt-title">EVENTS</h3>
</div>
<div class="slider-content2" ng-switch-when="2">
<h3 class="evt-title">EVENTS</h3>
</div>
<div class="slider-content" ng-switch-when="3">
<h3 class="evt-title">EVENTS</h3>
</div>
<div class="slider-content2" ng-switch-when="4">
<h3 class="evt-title">EVENTS</h3>
</div>
<script>
function slideShowController($scope, $timeout) {
var slidesInSlideshow = 4;
var slidesTimeIntervalInMs = 3000;
$scope.slideshow = 1;
var slideTimer =
$timeout(function interval() {
$scope.slideshow = ($scope.slideshow % slidesInSlideshow) + 1;
slideTimer = $timeout(interval, slidesTimeIntervalInMs);
}, slidesTimeIntervalInMs);
}
</script>
</body>
</html>
– no need for ng-switch angularjs will provide a 2way databind so just do switching in your controller
-remove all duplicate code
