ngRoundabout

   

• Heroku: http://ng-roundabout.herokuapp.com/
• Bower: 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.

---

Getting Started

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.

Options

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;

Traversing

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.

Maintain Aspect Ratio

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.