angular bootstrap ui make carousel vertical slide

Question

Using bootstrap ui
I'm trying to make the carousel of angular bootstrap ui to slide vertically instead of horizontal without success so far.
Does anyone know how to do this?
Thanks!

score 3 · Accepted Answer · edited May 23 '17 at 10:29

The answer here is pretty much what you are looking for: https://stackoverflow.com/a/30330303/635411

You can get it to work work with angular bootstrap ui by adding "vertical" to class on the carousel element and slightly altering the css that answer suggested:

angular.module('ui.bootstrap.demo', ['ui.bootstrap', 'ngAnimate']);
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function($scope) {
  $scope.myInterval = 5000;
  var slides = $scope.slides = [];
  $scope.addSlide = function() {
    var newWidth = 600 + slides.length + 1;
    slides.push({
      image: 'http://placekitten.com/' + newWidth + '/300',
      text: ['More', 'Extra', 'Lots of', 'Surplus'][slides.length % 4] + ' ' + ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
    });
  };
  for (var i = 0; i < 4; i++) {
    $scope.addSlide();
  }
});

.vertical .carousel-inner {
  height: 100%;
}
.vertical .carousel-inner > .item {
  -webkit-transition: .6s ease-in-out top;
  -o-transition: .6s ease-in-out top;
  transition: .6s ease-in-out top;
}
@media all and (transform-3d),
(-webkit-transform-3d) {
  .vertical .carousel-inner > .item {
    -webkit-transition: -webkit-transform .6s ease-in-out;
    -o-transition: -o-transform .6s ease-in-out;
    transition: transform .6s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
  }
  .vertical .carousel-inner > .item.next,
  .vertical .carousel-inner > .item.active.right {
    top: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  .vertical .carousel-inner > .item.prev,
  .vertical .carousel-inner > .item.active.left {
    top: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  .vertical .carousel-inner > .item.next.left,
  .vertical .carousel-inner > .item.prev.right,
  .vertical .carousel-inner > .item.active {
    top: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.vertical .carousel-inner > .active {
  top: 0;
}
.vertical .carousel-inner > .next,
.vertical .carousel-inner > .prev {
  top: 0;
  height: 100%;
  width: auto;
}
.vertical .carousel-inner > .next {
  left: 0;
  top: 100%;
}
.vertical .carousel-inner > .prev {
  left: 0;
  top: -100%
}
.vertical .carousel-inner > .next.left,
.vertical .carousel-inner > .prev.right {
  top: 0;
}
.vertical .carousel-inner > .active.left {
  left: 0;
  top: -100%;
}
.vertical .carousel-inner > .active.right {
  left: 0;
  top: 100%;
}

<!doctype html>
<html ng-app="ui.bootstrap.demo">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.js"></script>

  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
  <script src="example.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  <link href="my.css" rel="stylesheet">
</head>

<body>
  <div class="container">
    <div ng-controller="CarouselDemoCtrl">
      <div class="col-md-6">
        <div style="height: 305px, width:604px">
          <carousel class="vertical" interval="myInterval">
            <slide ng-repeat="slide in slides" active="slide.active">
              <img ng-src="{{slide.image}}" style="margin:auto;">
              <div class="carousel-caption">
                <h4>Slide {{$index}}</h4>
                <p>{{slide.text}}</p>
              </div>
            </slide>
          </carousel>
        </div>
        <div class="row">
          <div class="col-md-6">
            <button type="button" class="btn btn-info" ng-click="addSlide()">Add Slide</button>
          </div>
          <div class="col-md-6">
            Interval, in milliseconds:
            <input type="number" class="form-control" ng-model="myInterval">
            <br />Enter a negative number or 0 to stop the interval.
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

angular bootstrap ui make carousel vertical slide

1 Answers1