Bootstrap Snippet Angularjs uib Carousel Demo! using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
    .carousel-control.left,
    .carousel-control.right {
      /* display: none; */
    }
    .carousel .carousel-indicators, .carousel .left.carousel-control, .carousel .right.carousel-control {
        display: none;
    }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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) {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Angularjs uib Carousel Demo!"
Bootstrap 3.3.0 Snippet by muhittinbudak

Related: See More

Questions / Comments:

"Angularjs uib Carousel Demo!" Bootstrap 3.3.0 Snippet by muhittinbudak

Related: See More

Questions / Comments:

"Angularjs uib Carousel Demo!"
Bootstrap 3.3.0 Snippet by muhittinbudak