<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="CarouselDemoCtrl">
<div style="height: 305px">
<div uib-carousel carousel-controls active="active" slideindex="{{slideIndex}}">
<div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
<img ng-src="{{slide.image}}" style="margin:auto;">
</div>
<div class="row">
<div class="col col-xs-6">
<!-- <button type="button" class="btn btn-default btn-block">Previous</button> -->
<button type="button" class="btn btn-default btn-block" ng-click="goPrev()">Previous</button>
</div>
<div class="col col-xs-6">
<button type="button" class="btn btn-default btn-block" ng-click="goNext()">Next</button>
</div>
<div class="col col-xs-6">
<button type="button" class="btn btn-success btn-block" ng-click="setActiveSlide(3)">Go to 3rd slide</button>
</div>
<div class="col col-xs-6">
<button type="button" class="btn btn-info btn-block" ng-click="getActiveSlide(true)">Get Active Slide</button>
</div>
</div>
</div>
</div>
<br>
</div>
</body>
</html>
.carousel-control.left,
.carousel-control.right {
/* display: none; */
}
.carousel .carousel-indicators, .carousel .left.carousel-control, .carousel .right.carousel-control {
display: none;
}
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope, $window) {
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
$scope.active = 0;
var slides = $scope.slides = [];
var currIndex = 0;
$scope.addSlide = function() {
var genislik = $window.innerWidth;
var newWidth = genislik + slides.length + 1;
slides.push({
image: '//unsplash.it/' + newWidth + '/300',
text: ['Nice image','Awesome photograph','That is so cool','I love that'][slides.length % 4],
id: currIndex++
});
};
for (var i = 0; i < 4; i++) {
$scope.addSlide();
}
function generateIndexesArray() {
var indexes = [];
for (var i = 0; i < currIndex; ++i) {
indexes[i] = i;
}
return indexes;
}
});
angular.module('ui.bootstrap.demo').directive('carouselControls', ['$timeout', function($timeout) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
$timeout(function() {
scope.slidesViewed = [];
scope.slidesRemaining = [];
var carouselScope = element.isolateScope();
scope.goNext = function() {
carouselScope.next();
};
scope.goPrev = function() {
carouselScope.prev();
};
scope.setActiveSlide = function(number) {
console.log('>>>>>> : ' + number);
if (number === '' || isNaN(number) || number < 0 || number > carouselScope.slides.length - 1) {
return;
}
var direction = (scope.getActiveSlide(false) > number) ? 'prev' : 'next';
carouselScope.select(carouselScope.slides[number], direction);
}
scope.getActiveSlide = function(showAlert) {
var activeSlideIndex = carouselScope.slides.map(function(s) {
return s.slide.active;
}).indexOf(true);
if(showAlert) {
alert("Your Active Slide is : " + activeSlideIndex);
}
return activeSlideIndex;
};
});
}
};
}]
);
