Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Wildhoney/ngRoundabout
Three-dimensional HTML5 carousel implemented in Angular.js.
https://github.com/Wildhoney/ngRoundabout
Last synced: 4 months ago
JSON representation
Three-dimensional HTML5 carousel implemented in Angular.js.
- Host: GitHub
- URL: https://github.com/Wildhoney/ngRoundabout
- Owner: Wildhoney
- License: mit
- Created: 2014-09-17T22:11:56.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2015-02-12T09:03:59.000Z (almost 10 years ago)
- Last Synced: 2024-08-15T15:23:54.654Z (4 months ago)
- Language: JavaScript
- Homepage: http://ng-roundabout.herokuapp.com/
- Size: 16.1 MB
- Stars: 14
- Watchers: 4
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
ngRoundabout
=======
* **Heroku**: [http://ng-roundabout.herokuapp.com/](http://ng-roundabout.herokuapp.com/)
* **Bower:** `bower install ng-roundabout`
`ngRoundabout` is a HTML5 carousel using the wonderful [`preserve-3d` transformation](http://css-tricks.com/almanac/properties/t/transform-style/). 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://www.imgur.com/):
```javascript
$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`:
```html
```
`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](#options).
Lastly from within your partial you need to specify what to output – where the `model` is each and every item from your `array`:
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](#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:
```html
```
`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.