Opattern | Carousels

A carousel allows people to page through a list of related elements. Since only one element is visible, we use carousels for supporting content and not as a primary call-to-action.

Use carousels if you have limited space.
Consider adding a title above the carousel—it gives people a reason to look through the content.
Avoid using carousels for important information, as people might not see them.

Elements

A carousel should have these navigational elements:

An example of a carousel

You normally would be able to page left or right, but this is just an example.

Left Navigation: Moves back one element
Right Navigation: Moves forward one element
Pagination: Shows how many elements are in the carousel

Examples

Top 2 recommendations

The navigational arrows should be at the bottom of the carousel. This aligns the navigation arrows properly in the web layout grid.

Reasons your bill was higher

If the rest of the page content is centered, consider having the navigation arrows on the sides.

Carousel in AngularJS

The best way to get carousel on your project is to use the op-carousel directive from opattern-angular.

{% toggleText('op-carousel') %}

$ npm install opattern-angular

// Inject op-carousel as a dependency
angular.module('your-angular-app', [
    require('opattern-angular/directives/op-carousel').name,
    // ... more injected dependencies
]);

// place the carousel items into an array
app.controller('yourController', ['$scope', function ($scope) {
    $scope.carouselItems = [
        require('raw!./carousel-item-1.html'),
        require('raw!./carousel-item-2.html'),
        require('raw!./carousel-item-3.html')
    ];
}]);

<div op-carousel items="carouselItems"></div>

Attribute	Description	Type	Default
`nav-position=`	Where the left/right chevron is. Default is bottom. Set to `center` to have them on the sides.	string	`undefined`