Banner Rotary

Question

Hello, use Angularjs and wanted to put it to change the slides from 10 in 10 sec. I’ve tried a few codes and I couldn’t. Anybody got a tip? Here comes my controller.

(function () {
'use strict';
angular.module('scases')
    .controller('BannerCtrl', function ($scope) {
        $scope.slides = [
            { image: 'images/teste.jpg', description: 'Image 00', interval: 3000 },
            { image: 'images/zenfone.jpg', description: 'Image 01', interval: 3000 },
            { image: 'images/lg.jpg', description: 'Image 02', interval: 3000 },
            { image: 'images/iphone4.jpg', description: 'Image 03', interval: 3000 },
            { image: 'images/iphone5.jpg', description: 'Image 04', interval: 3000 }
        ];
        $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.direction = 'left';
            $scope.currentIndex = ($scope.currentIndex < $scope.slides.length - 1) ? ++$scope.currentIndex : 0;
        };

        $scope.nextSlide = function () {
            $scope.direction = 'right';
            $scope.currentIndex = ($scope.currentIndex > 0) ? --$scope.currentIndex : $scope.slides.length - 1;
        };
    }).animation('.slide-animation', function () {
        return {
            beforeAddClass: function (element, className, done) {
                var scope = element.scope();

                if (className == 'ng-hide') {
                    var finishPoint = element.parent().width();
                    if (scope.direction !== 'right') {
                        finishPoint = -finishPoint;
                    }
                    TweenMax.to(element, 0.5, { left: finishPoint, onComplete: done });
                }
                else {
                    done();
                }
            },
            removeClass: function (element, className, done) {
                var scope = element.scope();

                if (className == 'ng-hide') {
                    element.removeClass('ng-hide');

                    var startPoint = element.parent().width();
                    if (scope.direction === 'right') {
                        startPoint = -startPoint;
                    }

                    TweenMax.fromTo(element, 0.5, { left: startPoint }, { left: 0, onComplete: done });
                }
                else {
                    done();
                }
            }

        };

    }

    )

}) ();

Answer 1

Version using $timeout as timer. Note that the swapSlide method both selects the slide to be displayed and defines a timed auto-call.

var app = angular.module('sampleApp', []);

app.controller('SampleController', function ($scope, $timeout) {

  $scope.slides = [
    { image: 'images/teste.jpg', description: 'Image 00', interval: 3000 },
    { image: 'images/zenfone.jpg', description: 'Image 01', interval: 3000 },
    { image: 'images/lg.jpg', description: 'Image 02', interval: 3000 },
    { image: 'images/iphone4.jpg', description: 'Image 03', interval: 3000 },
    { image: 'images/iphone5.jpg', description: 'Image 04', interval: 3000 }
  ];

  $scope.slideIndex = -1;


  $scope.swapSlide = function(){

    $scope.slideIndex++;

    if ($scope.slideIndex > $scope.slides.length)
      $scope.slideIndex = 0;

    $scope.currentSlide = $scope.slides[$scope.slideIndex];

    $timeout($scope.swapSlide, 3000);

  };
  
  $scope.swapSlide();

});

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-resource.js"></script>
<div ng-app="sampleApp">

  <div ng-controller="SampleController">
    
    {{currentSlide}}
    
  </div>
</div>