<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.2.0-rc3" data-semver="1.2.0-rc3" src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
<link href="http://bazalt-cms.com/assets/bz-slider/0.1.0/bz-slider.css" rel="stylesheet" data-semver="0.1.0" data-require="bz-slider@0.1.0" />
<link data-require="bootstrap-css@3.0.0-rc2" data-semver="3.0.0-rc2" rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap.min.css" />
<script src="http://bazalt-cms.com/assets/bz-slider/0.1.0/bz-slider.js" data-semver="0.1.0" data-require="bz-slider@0.1.0"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.js" data-semver="1.2.0-rc2" data-require="angular-animate@*"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="main" ng-controller="DemoCtrl">
<div bz-slider delay="delay" autoplay="true">
<div class="bz-slide" ng-repeat="(i, slide) in slides" ng-show="i == $slideIndex" ng-class="slide.class">
<img ng-src="{{ slide.image }}" />
</div>
<div class="controls">
<button ng-click="prev()" class="btn btn-primary">Prev</button>
<button ng-click="play()" ng-if="!$play" class="btn btn-primary">Play</button>
<button ng-click="stop()" ng-if="$play" class="btn btn-primary">Stop</button>
<button ng-click="next()" class="btn btn-primary">next</button>
</div>
</div>
<button ng-click="delay = 1000" class="btn btn-default">Set delay 1s</button>
<button ng-click="delay = 2000" class="btn btn-default">Set delay 2s</button>
</body>
</html>
var app = angular.module('main', ['ngAnimate', 'bzSlider']).
controller('DemoCtrl', function($scope) {
$scope.delay = 2000;
$scope.slides = [
{'title': 'hell', 'class': 'animation-slide', 'image': 'https://raw.github.com/esvit/bz-slider/master/examples/images/image1.png'},
{'title': 'sadas', 'class': 'animation-fade', 'image': 'https://raw.github.com/esvit/bz-slider/master/examples/images/image2.png'}
];
})
.bz-slider {
width: 300px;
height: 300px;
overflow: hidden;
background-color: black;
border: 1px solid black;
}
.bz-slide {
width: 300px;
height: 300px;
}
.controls {
position: absolute;
bottom: 0;
z-index: 2;
}