Carousel

The carousel component displays a series of items such as cards for users to cycle through. Users can click arrow buttons to cycle through items on their desktops, and they can swipe through items on mobile devices. The carousel displays a progress bar under the selected item, and users can click the dots in the progress bar to select different items.

  • bb-carousel — Creates a carousel to display a series of items such as cards.
    • bb-carousel-selected-index — Specifies the index of the item to select. (Default: 0)
    • bb-carousel-selected-index-change — Specifies the function to be called when users select items in the carousel. This function accepts an index parameter that represents the selected item.
    • bb-carousel-style — Specifies the style for the carousel. The card-large and card-small styles are optimized to display card components and set the appropriate height and width. (Default: card-large)

Demo

Large card {{item}} This card demonstrates the amount of space that is available for a card that uses the default large size. If the content does not require this much space, you can set the card size to small. The type of content to display in the body of a card varies based on what the card represents and whether it prompts users to action. The content can consist of some combination of a graph, trend, status, summary information, and guidance text.

Markup

<div ng-controller="CarouselTestController as carouselCtrl">
    <div class="row">
        <div class="col-xs-4">
            <label>Choose carousel item</label>
            <select ng-model="carouselCtrl.selectModel" class="form-control" ng-change="carouselCtrl.selectChanged(carouselCtrl.selectModel)">
                <option ng-repeat="item in carouselCtrl.items">{{item}}</option>
            </select>
        </div>
    </div>
  
  <bb-carousel bb-carousel-style="card-large"
    bb-carousel-selected-index="carouselCtrl.selectedIndex"
    bb-carousel-selected-index-change="carouselCtrl.selectedIndexChange(index)">
    <bb-carousel-item ng-repeat="item in carouselCtrl.items">
      <bb-card bb-card-size="large">
        <bb-card-title>Large card {{item}}</bb-card-title>
        <bb-card-content>
          This card demonstrates the amount of space that is available for a card that uses the default large size. If the content does not require this much space, you can set the card size to small. The type of content to display in the body of a card varies based on what the card represents and whether it prompts users to action. The content can consist of some combination of a graph, trend, status, summary information, and guidance text.
        </bb-card-content>
        <bb-card-actions>
          <button type="button" class="btn btn-default">Click me</button>
        </bb-card-actions>
      </bb-card>
    </bb-carousel-item>
  </bb-carousel>
</div>

JavaScript

/*global angular */

(function () {
    'use strict';

    function CarouselTestController() {
        var i,
            itemCount = 20,
            vm = this;

        vm.items = [];

        for (i = 0; i < itemCount; i++) {
            vm.items.push(i + 1);
        }

        function selectChanged(newIndex) {
            vm.selectedIndex = parseInt(newIndex) - 1;
        }

        function selectedIndexChange(index) {
            vm.selectedIndex = index;
            vm.selectModel = (index + 1).toString();
        }

        function goToFirstIndex($event) {
            $event.preventDefault();
            $event.stopPropagation();
            vm.selectedIndex = 0;
        }
        vm.selectedIndexChange = selectedIndexChange;
        vm.goToFirstIndex = goToFirstIndex;

        vm.selectedIndex = 5;

        vm.selectChanged = selectChanged;
    }

    angular.module('stache')
        .controller('CarouselTestController', CarouselTestController);
}());