<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>
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'); }); });
* { 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; }