Amazing Ionic Carousel 3d, 100% compatible with ionic made originally in AngularJs and imported to Ionic V1. This plugin works sliding the screen or clicking in the other cards.

Demo: https://www.youtube.com/watch?v=hvXDiXMULuM&feature=youtu.be

Usage:

Copy the folders /angular-carousel-3d and /angular-swipe to your /www/lib folder.

Add the following source to index.html:

```

```

Add the angular-carousel-3d module as a dependency to your application module:

angular.module('starter', ['ionic', 'starter.controllers', 'angular-carousel-3d'])

Add a carousel-3d directive. Add ng-model with your array of objects Add carousel3d-slide directive and ng-repeat to render slides

Exemple:

On view:

<carousel3d-slide ng-repeat="slide in carousel track by $index" style="background: {{slide.bg}} /*url('../{{slide.photo}}') no-repeat center center fixed*/;/*-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;*/ box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.35);"> <a ng-href="#" style="text-decoration: none;"> <div style="padding: 10px; color: #000;"> <img ng-src="{{slide.photo}}" style="width: 160px; height: auto; display: block; margin: auto;"> <p style="text-align: center;"><strong>{{slide.name}}</strong></p> </div></a> </carousel3d-slide> </carousel3d>

On Controller:

``` $scope.carousel = [ {photo: "img/img1.png", name: "Name #1", bg: "rgba(42, 100, 150, 0.9)"}, {photo: "img/img2.png", name: "Name #2", bg: "rgba(239, 241, 245, 0.9);"}, {photo: "img/img3.png", name: "Name #3", bg: "rgba(42, 100, 150, 0.9)"}, {photo: "img/img4.png", name: "Name #4", bg: "rgba(68, 43, 243, 0.9)"}, {photo: "img/img5.png", name: "Name #5", bg: "rgba(239, 241, 245, 0.9);"} ];

$scope.options = { visible: 3, perspective: 45, startSlide: 0, border: 0, dir: 'ltr', width: 200, height: 160, space: 140, loop: true, // clicking: true, controls: true };

$scope.test = function (index) {
console.log("Selected = " + index); // $scope.selected = index; } ```

Directive options :

options options object with properties:

sourceProp image source property (Default: 'src') visible number of visible slides (Default: 0) perspective slide distance between z=0 (Default: 35) animationSpeed slide animation speed in ms (Default: 500) width: width of slide (Default: 360) height: height of slide (Default: 270) border: width of slide border (Default: 0) space: space between slides (Default: 'auto') clicking: enable navigation with slide clicking (Default: false) loop: slide looping (Default: false) inverseScaling: Scale of background slides (Default: 250) controls: toggle arrow controls on carousel (Default: false) Directive callbacks :

on-selected-click : Callback that is invoked when the center slide was clicked.

on-slide-change : Callback that is invoked when the slide is changed.

on-last-slide : Callback that is invoked on last slide selected.

on-before-change : Callback that is invoked before slide change.