Caroussel test

by Nicolas Buecher

HTML

<script src="https://code.angularjs.org/1.5.5/angular.js"></script>
<script src="https://code.angularjs.org/1.5.5/angular-animate.js"></script>
<h1>Carousel ngAnimate :</h1>

<div id="carousel-container" ng-controller="myController">
  <div id="carousel-container-row">

    <div class="left-arrow">
      <img ng-src="{{leftArrow}}" ng-click="moveCarousel(true);" class="carousel-arrow" />
    </div>

    <div class="carousel">
      <div ng-repeat="preview in previews" ng-if="isPreviewVisible(preview.id)" ng-class="{'preview': true,
                      'left': isLeft(preview.id),
                      'center': isCenter(preview.id),
                      'right': isRight(preview.id),
                      'waiting-left': isWaitingLeft(preview.id),
                      'waiting-right': isWaitingRight(preview.id)
                     }">
        <p class="preview-date">{{preview.date}}</p>
        <img ng-src="{{preview.src}}" class="preview-image" />
        <p class="preview-name">{{preview.name}}</p>
      </div>
    </div>

    <div class="right-arrow">
      <img ng-src="{{rightArrow}}" ng-click="moveCarousel(false);" class="carousel-arrow" />
    </div>

  </div>
</div>

<h1>Carousel pure CSS transitions :</h1>

<div id="carousel-container" ng-controller="myController">
  <div id="carousel-container-row">

    <div class="left-arrow">
      <img ng-src="{{leftArrow}}" ng-click="moveCarousel(true);" class="carousel-arrow" />
    </div>

    <div class="carousel">
      <div ng-repeat="preview in previews" ng-if="isPreviewVisible(preview.id)" ng-class="{'preview-CSS': true,
                      'left-CSS': isLeft(preview.id),
                      'center-CSS': isCenter(preview.id),
                      'right-CSS': isRight(preview.id),
                      'waiting-left-CSS': isWaitingLeft(preview.id),
                      'waiting-right-CSS': isWaitingRight(preview.id)
                     }">
        <p class="preview-date">{{preview.date}}</p>
       ...

CSS

#carousel-container {
    display: table;
    width: 100%;
    height: 350px;
    padding: 2% 0;
}

#carousel-container-row {
    display: table-row;
    width: 100%;
    height: 100%;
}

.left-arrow {
    display: table-cell;
    width: 15%;
    height: 100%;

    vertical-align: middle;
    text-align: right;
}

.right-arrow {
    display: table-cell;
    width: 15%;
    height: 100%;

    vertical-align: middle;
    text-align: left;
}

.carousel-arrow {
    height: 60%;
    cursor: pointer;
}

.carousel {
    position: relative;

    display: table-cell;
    width: 70%;
    height: 100%;

    text-align: center;
}

.preview {
    position: absolute;

    display: block;
    width: 25%;
    height: 100%;
}

.center-add {
    transition: all 1s ease;
}

.center, .center.add.center-add-active {
    left: 37.5%;
    opacity: 1;
    -webkit-transform: perspective(1000px) scale(1.1);
    -moz-transform: perspective(1000px) scale(1.1);
    -ms-transform: perspective(1000px) scale(1.1);
    -o-transform: perspective(1000px) scale(1.1);
    transform: perspective(1000px) scale(1.1);
}

.left-add {
    transition: all 1s ease;
}

.left, .left-add.left-add-active {
    left: 5%;
    opacity: 0.7;
    -webkit-transform: perspective(1000px) rotateY(-45deg) scale(0.9);
    -moz-transform: perspective(1000px) rotateY(-45deg) scale(0.9);
    -ms-transform: perspective(1000px) rotateY(-45deg) scale(0.9);
    -o-transform: perspective(1000px) rotateY(-45deg) scale(0.9);
    transform: perspective(1000px) rotateY(-45deg) scale(0.9);
}

.right-add {
    transition: all 1s ease;
}

.right, .right-add.right-add-active {
    left: 70%;
    opacity: 0.7;
    -webkit-transform: perspective(1000px) rotateY(45deg) scale(0.9);
    -moz-transform: perspective(1000px) rotateY(45deg) scale(0.9);
    -ms-transform: perspective(1000px) rotateY(45deg) scale(0.9);
    -o-transform: perspective(1000px) rotateY(45deg) scale(0.9);
    transform: perspective(1000px) rotateY(45deg)...

JavaScript

var myApp = angular.module('myApp', ["ngAnimate"]);

myApp.controller('myController', ['$scope', function myController($scope) {

  $scope.leftArrow = leftArrow;
  $scope.rightArrow = rightArrow;
  $scope.previewImage = previewImage;

  $scope.previews = [{
    'id': 1,
    'name': 'Test1',
    'date': 'Test1',
    'src': $scope.previewImage
  }, {
    'id': 2,
    'name': 'Test2',
    'date': 'Test2',
    'src': $scope.previewImage
  }, {
    'id': 3,
    'name': 'Test3',
    'date': 'Test3',
    'src': $scope.previewImage
  }, {
    'id': 4,
    'name': 'Test4',
    'date': 'Test4',
    'src': $scope.previewImage
  }, {
    'id': 5,
    'name': 'Test5',
    'date': 'Test5',
    'src': $scope.previewImage
  }, {
    'id': 6,
    'name': 'Test6',
    'date': 'Test6',
    'src': $scope.previewImage
  }, {
    'id': 7,
    'name': 'Test7',
    'date': 'Test7',
    'src': $scope.previewImage
  }, {
    'id': 8,
    'name': 'Test8',
    'date': 'Test8',
    'src': $scope.previewImage
  }, {
    'id': 9,
    'name': 'Test9',
    'date': 'Test9',
    'src': $scope.previewImage
  }, ];

  $scope.currentPreview = $scope.previews.length;

  $scope.isLeft = function(i) {
    return (i === ($scope.currentPreview - 1));
  };
  $scope.isCenter = function(i) {
    return (i === ($scope.currentPreview));
  };
  $scope.isRight = function(i) {
    return (i === ($scope.currentPreview + 1));
  };
  $scope.isWaitingLeft = function(i) {
    return (i === ($scope.currentPreview - 2));
  };
  $scope.isWaitingRight = function(i) {
    return (i === ($scope.currentPreview + 2));
  };
  $scope.isPreviewVisible = function(i) {
    return ((i >= ($scope.currentPreview - 2)) && (i <= ($scope.currentPreview + 2)));
  };

  $scope.moveCarousel = function(b) {
    if (b) {
      if ($scope.currentPreview >= $scope.previews.length) {
        $scope.currentPreview = $scope.previews.length;
      } else {
        $scope.currentPreview += 1;
      }
    } else {
      if ($scope.currentPreview <=...