Carousel

Displays items in a carousel.

Parameters
inv-carousel - Works same as ng-reapeat but is limited to (item in items track by item.value). "track by" is optional.
size - Number of items to display
selected-item - initially selected item

Simple Carousel

Simple Carousel.

HTML

<div ng-init="names = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6']">
    <div inv-carousel="item in names"
        selected-item="names[1]"
        size="2">
        <div ng-bind="item"></div>
    </div>
</div>

Carousel with click handler

As individual items are transcluded, it has access to outer scope.

name

HTML

<div ng-controller="CarouselExampleController as ctrl">
    <div inv-carousel="individualItem in ctrl.items track by individualItem.value"
        size="4">
        <div ng-click="ctrl.selected(individualItem)"
            style="height: 100px; background: rgba(0,0,0,0.2)">
            <div>name</div>
            <div ng-bind="individualItem.value"></div>
        </div>
    </div>
</div>