Carousels

Carousels simplify an interface by grouping similar content into a single space.

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:

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.

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