angular carousel

wow so cool

by Himanshu Joshi

HTML

<div ng-app="ngAppDemo">
    <div ng-controller="carousel">
        <h1>Carousel</h1>
        <div class="poopies">
            <div class="item" ng-repeat="image in images" ng-class="{left: $index < imageid, right: $index > imageid, centered: $index == imageid}">{{image}}</div>
        </div>
        <div class="dots"> <span ng-repeat="image in images" ng-class="{selected: $index == imageid}">*</span>

        </div>
<a href="#" ng-click="imageid = (images.length + imageid - 1) % images.length">previous</a>
&nbsp;
<a href="#" ng-click="imageid = (imageid + 1) % images.length">next</a>

    </div>
</div>

CSS

.poopies {

    position: relative;

    overflow: hidden;

    width: 200px;

    height: 50px;

}

.left, .right, .centered {

    display: block;

    width: 100%;

    height: 100%;

    background: silver;

    position: absolute;

    top: 0;

    left: 0px;

    transition: left 0.5s;

}

.left {

    left: -200px;

}

.right {

    left: 200px;

}

.dots span {

    color: #ddd;

}

.dots .selected {

    color: #333;

}

JavaScript

var app = angular.module('ngAppDemo', []);

app.controller('carousel', function ($scope) {
    $scope.imageid = 0;
    $scope.images = [
        "Yo wassup",
        "Poopie tray",
        "Rawr",
        "another one",
        "uh"];
});