Three-dimensional HTML5 carousel implemented in Angular.js.
MIT License
bower install ng-roundabout
ngRoundabout
is a HTML5 carousel using the wonderful preserve-3d
transformation. With this module you can easily create your own 3D carousel by specifying the markup for the partial – which are used for each dimension.
Using ngRoundabout
is very simple – first you need to pass an array
via the ng-model
to the directive. Therefore you need an array
of something – in our case pictures taken randomly from Imgur:
$http.get('imgur.json').then(function then(response) {
$scope.pictures = response.data;
});
We can then setup our directive, passing in the pictures
into the ng-model
:
<roundabout ng-model="pictures"></roundabout>
ngRoundabout
will then compute how many dimensions it will render based on the array. It's worth noting that if you want multiple items per dimension then simply pass an array
of an array
.
The next step is to render each dimension – which requires you supplying the path to your partial which renders the markup for the dimension. By default ngRoundabout
will attempt to load your partial from partials/roundabout.html, but you can modify this — and other options — by modifying the FIGURE_PARTIAL_PATH
option.
In order to modify the ngRoundabout
options, you need to import the roundaboutOptions
object into your controller – from there you can modify the options.
Lastly from within your partial you need to specify what to output – where the model
is each and every item from your array
:
<a target="_blank" href="{{model}}">
<div style="background-image: url({{model}})"></div>
</a>
Voila! Any additional styles should be done via your stylesheet.
Import roundaboutOptions
into your controller, and then you will have access to the following options:
DIMENSION_WIDTH
: Width of each dimension;DIMENSION_HEIGHT
: Height of each dimension;DIMENSION_SPACING
: Margin between the dimensions;PERSPECTIVE
: Perspective for the carousel;BACKFACE_VISIBILITY
: Whether the backface is visible;MAINTAIN_ASPECT_RATIO
: See maintain aspect ratio;FIGURE_PARTIAL_PATH
: Path to your dimension partial;You can traverse the carousel by binding to the dimension
property from within your HTML:
<carousel ng-model="pictures" data-dimension="dimension"></carousel>
ngRoundabout
will simply multiply the dimension
by the angle of the dimensions. Whenever you modify the dimension
property from inside your controller, ngRoundabout
will move to that dimension.
Please note that you may need to define your custom roundaboutOptions.TRANSLATE_Z
if you are modifying the translateZ
from within your CSS.
By default ngRoundabout
will not maintain the width — or aspect ratio — of the carousel when items are added and/or removed. By defining MAINTAIN_ASPECT_RATIO
as true
, ngRoundabout
will maintain the width.
Otherwise if the value is false
then the carousel will gradually contract as items are removed, and expand as items are added – which can make it difficult to constrain the carousel in a container of a predefined size.