angular-carousel demo

Sample demo for angular-carousel

HTML

<script src="http://fonts.googleapis.com/css?family=Droid+Sans:400,700"></script>
<link rel="stylesheet" href="http://blog.revolunet.com/angular-carousel/dist/angular-carousel.min.css">
<script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.9/angular-touch.min.js"></script>
<script src="http://blog.revolunet.com/angular-carousel/dist/angular-carousel.min.js"></script>
<h3>YouTube API + angular-carousel demo</h3>
<div ng-controller="DemoCtrl">
    <ul rn-carousel rn-carousel-indicator="true">
        <li class="video" ng-repeat="item in items" style="background-image:url({{ item.media$group.media$thumbnail[0].url }})">
            <div>{{ item.title.$t }}</div>
        </li>
    </ul>
    <br>
    swipe with your mouse or finger.
    <br><br>
    Full demo here <a target="°blank" href="http://blog.revolunet.com/angular-carousel/">http://blog.revolunet.com/angular-carousel/</a>
</div>

CSS

* {
    font-family: 'Droid Sans', sans-serif;
}
#log {
    margin-top:10px;
    font-size:10px
}
ul {
    width: 300px;
    height:150px;
}
.video {
    background-size: cover;
    position:relative;
}
.video div {
    font-size:10px;
    width: 100%;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.6);
    color:white;
    padding: 5px;
    position:absolute;
    box-sizing: border-box;
}

JavaScript

var app = angular.module('carousel-demo', ['angular-carousel']);

app.controller('DemoCtrl', function($scope, $http) {
    $scope.items = []
    $http.get('http://gdata.youtube.com/feeds/api/standardfeeds/most_popular?v=2&alt=json').success(function(data) {
        $scope.items = data.feed.entry;
    }).error(function(data) {
        alert('cannot fetch youtube API');
    });
    
});