angular-flexslider
Version:
AngularJS wrapper for Flexslider
67 lines (62 loc) • 2.09 kB
HTML
<html ng-app="BasicSlider">
<head>
<title>Angular FlexSlider Example - Callbacks</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 slideshow.slides"
animation="slide"
start="slideshow.start($slider)"
before="slideshow.before()"
after="slideshow.after()"
end="slideshow.end()">
<li>
<img ng-src="{{s}}">
</li>
</flex-slider>
<div>
<p>Callbacks:</p>
<ul>
<li ng-repeat="l in slideshow.log track by l.id">{{l.message}}</li>
</ul>
</div>
<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="../angular-flexslider.js"></script>
<script type="text/javascript">
angular.module('BasicSlider', ['angular-flexslider'])
.controller('BasicSliderCtrl', function($scope) {
$scope.slideshow = {}
$scope.slideshow.slides = [
'http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg',
'http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg',
'http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg',
'http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg'
];
var logId = 0;
$scope.slideshow.log = []
$scope.slideshow.start = function(slider){
console.log(slider);
$scope.slideshow.log.push({ id: ++logId, message: 'start' });
}
$scope.slideshow.before = function(){
$scope.slideshow.log.push({ id: ++logId, message: 'before' });
}
$scope.slideshow.after = function(){
$scope.slideshow.log.push({ id: ++logId, message: 'after' });
}
$scope.slideshow.end = function () {
$scope.slideshow.log.push({ id: ++logId, message: 'end' });
};
});
</script>
</body>
</html>