
Amazing Ionic Carousel 3d
Amazing Ionic fully customizable Carousel 3d
$9.00
Details
- Version:
- 1.0
- Ionic:
- 1.x
- Platforms:
- iOS, Android
- Released:
- 3 years ago
- Updated:
- 3 years ago
- Category:
- Plugins
- Tags:
- ,
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.