2

Olá, uso angularJS e queria colocar ele para mudar os slides de 10 em 10 seg. Ja tentei alguns codigos e nao consegui. Alguem tem uma dica? Aqui vai meu 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();
                }
            }

        };

    }

    )

}) ();

1 Resposta 1

2

Versão utilizando $timeout como temporizador. Note que o método swapSlide tanto seleciona o slide a ser exibido como define uma auto-chamada temporizada.

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>

3
  • Tentei do jeito que vc colocou ai, e continua nao dando certo. Ele nao da nenhum erro no console. mas eh como se nao funcionasse a funçao.
    – Biellx
    Commented 16/05/2016 às 22:39
  • angular.js:13550 TypeError: $scope.swapSlide is not a function
    – Biellx
    Commented 16/05/2016 às 22:40
  • @Biellx Na minha resposta, clique em Executar trecho de Código. Se funcionar, o problema provavelmente está no seu teste local.
    – OnoSendai
    Commented 17/05/2016 às 15:28

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .