angular-flexslider
Version:
AngularJS wrapper for Flexslider
41 lines (37 loc) • 1.82 kB
HTML
<html ng-app="BasicSlider">
<head>
<title>Angular FlexSlider Example - Switch Content Type</title>
<link rel="stylesheet" type="text/css" href="../bower_components/flexslider/flexslider.css">
<style type="text/css">
.flexslider-container {
width: 50%;
margin: 10px auto;
}
</style>
</head>
<body ng-controller="BasicSliderCtrl">
<flex-slider slide="s in slides track by s.id" animation="slide">
<li ng-switch="s.type">
<iframe ng-switch-when="video" ng-src="{{s.url}}" width="100%" height="400" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<img ng-switch-default ng-src="{{s.url}}">
</li>
</flex-slider>
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/flexslider/jquery.flexslider.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="../angular-flexslider.js"></script>
<script type="text/javascript">
angular.module('BasicSlider', ['angular-flexslider'])
.controller('BasicSliderCtrl', function($scope, $sce) {
$scope.slides = [
{ id: 1, type: 'video', url: $sce.trustAsResourceUrl('http://player.vimeo.com/video/39683393?api=1&player_id=player_1') },
{ id: 2, type: 'image', url: 'http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg'},
{ id: 3, type: 'image', url: 'http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg'},
{ id: 4, type: 'image', url: 'http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg'},
{ id: 5, type: 'image', url: 'http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg'},
];
});
</script>
</body>
</html>