Geek Answers Handbook

Angular bootstrap ui make carousel vertical slide

Using bootstrap ui
I'm trying to make the carousel angular bootstrap ui slide vertically and not horizontally without success so far.
Does anyone know how to do this?
Thank!

+4
source share
1 answer

The answer here is pretty much what you are looking for: fooobar.com/questions/259761 / ...

You can make it work with angular bootstrap ui by adding “vertical” to the class in the element carouseland slightly modifying the css that 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.imtqy.com/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>
Run codeHide result
+3
source

More articles:


All Articles