Slide left/right with ng-animate in AngularJS

Question

I am really struggling in sliding my content in AngularJS to left/right when left/right button is clicked respectively.

I know it can be done with ng-animate, but I am not sure how to do it in my AngularJS code.

Below is my code. I'd highly appreciate if you could assist me.

HTML

<div class="page">
    <div class="content">
        <div class="previous-btn" ng-click="goToPrevSlide(currSlide)">
            <a href="#" ng-click="goToPrevSlide(currSlide)" class="left-arrow"></a>
        </div>
        <div class="slide">
            <img src="{{getCurrentSlide().img}}" width="800" height="500" />
        </div>
        <div class="video">
            <div id="myvideo" width="140" height="220"></div>
            <div class="speaker-info">
                <p class="speaker-name">{{getCurrentSlide().speaker}}</p>
                <p class="speaker-title">{{getCurrentSlide().title}}</p>
            </div>
        </div>
        <div class="next-btn" ng-click="goToNextSlide(currSlide)">
            <a href="#" ng-click="goToNextSlide(currSlide)" class="right-arrow"></a>
        </div>
    </div>
</div>

JS

function getPresentationData(){

    var data = {};

    data.title = 'Site's Title';

    data.pages = [];
    data.subMenu = [];



    data.subMenu[0] = {};    
    data.subMenu[0].list = [];
    data.subMenu[0].list[0] = {heading:'Background', number: 1};
    data.subMenu[0].list[1] = {heading:'Second One', number: 3};
    data.subMenu[0].list[2] = {heading:'Third One', number: 4};

    data.pages[0] = {};
    data.pages[0].menuTitle = 'Introduction';
    data.pages[0].slides = [];
    data.pages[0].slides[0] = {heading:'Heading 1: profile', speaker: 'Speaker's Name', title:'Expert in something', img:'content/pg-3.jpg', video:'content/videos/3.flv'};
    data.pages[0].slides[1] = {heading:'Heading2: Background and experience in something', speaker: 'Some Speaker', title:'Expert in something', img:'content/pg-4.jpg', video:'content/videos/4.flv'};



    data.subMenu[1] = {};    
    data.subMenu[1].list = [];
    data.subMenu[1].list[0] = {heading:'First Case', number: 3};
    data.subMenu[1].list[1] = {heading:'Second Case', number: 5};
    data.subMenu[1].list[2] = {heading:'Third Case', number: 9};

     ...

    return data;
}


var smartPresentationModule = angular.module('smartPresentationModule', [])

/*
smartPresentationModule.config(function($locationProvider, $routeProvider) {
    $locationProvider.html5Mode(false);

     $routeProvider
     .when('/show/:pageno/:slideno', {
     event: 'showslide'
     })
     .otherwise({ redirectTo: '/' });

     $scope.$on('someEve', function(){
     //console.log('someEve occured::caught by on method...');
     });
     $scope.$broadcast('someEve');

});
*/


function presentationController($scope, $location){

    $scope.data = getPresentationData();

    $scope.currPage = 0;
    $scope.currSlide = 0;

    $scope.goToPage = function(pageIndex){
        $('.slide-container').hide();
        $scope.currSlide = 0; 
        $scope.currPage = pageIndex;
        $('.slide-container').fadeIn(500);
    };

    $scope.goToPrevPage = function(){ 
        if ($scope.currPage===0){
            $scope.currPage = $scope.data.pages.length-1;
        }else{
            $scope.currPage = $scope.currPage-1;        
        }
        $scope.currSlide = 0; 
    };

    $scope.goToNextPage = function(){ 
        if ($scope.currPage===($scope.data.pages.length-1)){
            $scope.currPage = 0;
        }else {
            $scope.currPage = $scope.currPage + 1;
        }
        $scope.currSlide = 0; 
    };

    $scope.goToSpecificPage = function(pageIndex, slideIndex){ 

        $('.slide').hide(); //.slide-container

        $scope.currPage = pageIndex;
        $scope.currSlide = slideIndex; 

       $('.slide').animate({"width":"show", opacity: 1}, 700); //.slide-container
    };

    $scope.getCurrentSlide = function() { 

        return $scope.data.pages[$scope.currPage].slides[$scope.currSlide]; 
    };

    $scope.goToSlide = function(slideIndex){ $scope.currSlide = slideIndex; };

    $scope.goToPrevSlide = function(){
        $('.slide').hide(); //.slide-container
        if ($scope.currSlide===0){
            $scope.goToPrevPage();
            $scope.currSlide = $scope.data.pages[$scope.currPage].slides.length-1;
        }else{
            $scope.currSlide = parseInt($scope.currSlide)-1;
        }
        $('.slide').animate({"width":"show", opacity: 1}, 700); //.slide-container

    };

    $scope.goToNextSlide = function(){
        $('.slide').hide(); //.slide-container
        if ($scope.currSlide===($scope.data.pages[$scope.currPage].slides.length-1)){
            $scope.goToNextPage();
            $scope.currSlide = 0;
        }else{
            $scope.currSlide = parseInt($scope.currSlide)+1;
        }
        $('.slide').animate({"width":"show", opacity: 1}, 700); //.slide-container

    };


    $scope.$watch( function(){ return $scope.currPage+':'+$scope.currSlide; }, function() {
        jwplayer("myvideo").setup({
            autostart: true,
            controlbar: {position: 'bottom'},
            skin: "scripts/vendor/jwplayer/simple.zip",

            flashplayer: "scripts/vendor/jwplayer/player-licensed.swf",
            file: $scope.getCurrentSlide().video
        });
        if (!$scope.getCurrentSlide().video.length) {
            $(".video").hide(); 
        }
        else {
            $(".video").show(); 
        }
    });
}

Thanks.

Could you show us the demo in jsfiddle or something similar? — , Jun 11 '13 at 15:08
I saw this. http://www.nganimate.org/angularjs/ng-switch ... This is exactly what I want to do in AngularJS. This is done through ng-animate. thanks. — Steve, Jun 11 '13 at 15:15
Here, if I see the code, I see each slide manually hard coded in the
tag. The animation is then done on each slide within the tag. But if you see my code, I've made an array through which it picks each of the element. There are no hard-coded elements. Do you think, in this case, I can give it a slide-effect animation? Thanks. — Steve, Jun 11 '13 at 15:36
There really isn't enough for me to work with. If you'd have hosted in gist/jsfiddle then I could give you specific answers. — , Jun 11 '13 at 15:44
If your array looks anything similar to this: http://jsfiddle.net/LFFav/1/ then it should point you to the right direction. — , Jun 11 '13 at 15:47
Thank you Parzival, I am unable to open Jsfiddle and such through my corporate mac, due to some restrictions. I've updated the JS and arrays in my question. You can take a look now. Thank you very much for pointing me to the link. — Steve, Jun 11 '13 at 16:18

score 3 · Answer 1 · answered Dec 03 '13 at 22:43

You can listen for $routeChangeSuccess event that is dispatched by http://docs.angularjs.org/api/ngRoute.$route. This way in your presentationController you can have $scope.$on('presentationController', function(angularEvent, next) {});

And based on the next and current locations call goToXPage().

You can also check out this post that explains how similar view sliding is implemented with ng-view.

Slide left/right with ng-animate in AngularJS

HTML

JS

1 Answers1