Organizational Research By

Surprising Reserch Topic

how to perform animation on an


how to perform animation on an  using -'javascript,css,angularjs,twitter-bootstrap,ui.bootstrap'

I am newbie to AngularJS and i am stuck on point where i am implementing carousel using ui.bootstrap in angularjs and i have two type of carousel. One is single slide at a time and multiple slide at a time. Below is the code segment which i am using.

<!-- HTML Code for Carousel -->

<div id="myCarousel" class="carousel slide row" data-ride="carousel" ng-controller="slideController">
    <carousel interval="3000">
      <slide ng-repeat="slide in slides" active="slide.active" ng-animate="'animate'">
        <img ng-src="{{slide.image}}" style="margin: auto;">
        <div class="carousel-caption">
          <h4>Slide {{$index}}</h4>
          <p>{{slide.text}}</p>
        </div>
      </slide>
    </carousel>
</div>
<div id="newArivalsCarousel" class="carousel slide row" data-ride="carousel" ng-controller="newArivalController">
    <carousel interval="3000">
      <slide ng-repeat="slide in newArivals" active="slide.active" ng-animate="'animate'">
            <div class="slide">
                <img ng-src="{{slide.image}}" width="200px" style="float:left;">
            </div>
            <div class="slide">
                <img ng-src="{{newArivals[getSecondIndex($index+1)].image}}" width="200px" style="float:left;" >
            </div>
            <div class="slide">
                <img ng-src="{{newArivals[getSecondIndex($index+2)].image}}" width="200px" style="float:left;" >
            </div>
      </slide>
    </carousel>
</div>


Here you can find angularJs app code for loading animate module and performing other stuff.

<!-- App.css code -->

var module = angular.module('test', ['ui.bootstrap', 'ngAnimate']);

module.controller('navController', function ($scope) {

});

module.controller('slideController', function ($scope) {
    $scope.slides = [];
    $scope.slides.push({text: 'cats!', image: 'img/image-1.jpg'});
    $scope.slides.push({text: 'cats!', image: 'img/image-2.jpg'});
    $scope.slides.push({text: 'cats!', image: 'img/image-3.jpg'});

    $scope.setActive = function(idx) {
        $scope.slides[idx].active=true;
    }
});

module.controller('newArivalController', function ($scope) {
    $scope.myInterval = 5000;
    var newArivals = $scope.newArivals = [];
    newArivals.push({text: 'cats!', image: 'img/image-1.jpg'});
    newArivals.push({text: 'cats!', image: 'img/image-2.jpg'});
    newArivals.push({text: 'cats!', image: 'img/image-3.jpg'});

    $scope.setActive = function(idx) {
        $scope.newArivals[idx].active=true;
    }

    $scope.getSecondIndex = function(index)
      {
        if(index-newArivals.length>=0)
          return index-newArivals.length;
        else
          return index;
      }
});


I have also animate.css class where i have defined css for diffrent animation effect like bounceIn, bounceOut, fadeIn,FadeOut etc. I am not be able to post that file due to its size.

Please friends help me out as i am not be able to put animation on angularJs carousel and i have to apply diffrent -2 animation effects on carousels. we don't want to use jquery for that, as project needs to be develop in 0 jQuery.
    
asked Oct 6, 2015 by vickeykumar66
0 votes
4 views



Related Hot Questions



Government Jobs Opening


...