<body ng-app="myApp">
<div ng-controller="slideShowController" class="imageslide" ng-switch='slideshow' ng-animate="'animate'">
<div class="slider-content" ng-switch-when="1">
<img src="../images/ship.png" />
</div>
<div class="slider-content" ng-switch-when="2">
<img src="../images/cargo.png" />
</div>
<div class="slider-content" ng-switch-when="3">
<img src="../images/lake.png" />
</div>
<div class="slider-content" ng-switch-when="4">
<img src="../images/cargo2.png" />
</div>
</div>
<script>
var app = angular.module('myApp', ['angular-responsive']);
app.controller('slideShowController', function($scope, $timeout) {
//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><script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-responsive/src/responsive-directive.js"></script>
<script src="../bower_components/script.js"></script>
<link rel="stylesheet" href="../bower_components/style2.css" />
<link href="../bower_components/style3.css" rel='stylesheet' type='text/css'>I am looking for an AngularJS image slider plugin that is fully responsive on both desktop and mobile devices. I need a working example for this, can you please provide one?
The code I currently have functions for sliding images but lacks responsiveness especially on mobile views. Any help in solving this issue would be appreciated.