角度引导用户界面制作旋转木马垂直幻灯片[关闭]答案

【问题标题】：angular bootstrap ui make carousel vertical slide [closed]角度引导用户界面制作旋转木马垂直幻灯片[关闭]
【发布时间】：2015-05-23 18:24:21
【问题描述】：

使用引导用户界面
我正在尝试使 angular bootstrap ui 的轮播垂直滑动而不是水平滑动，但到目前为止没有成功。
有谁知道如何做到这一点？
谢谢！

【问题讨论】：

标签： javascript css angularjs angular-ui-bootstrap

【解决方案1】：

这里的答案几乎就是您想要的：https://stackoverflow.com/a/30330303/635411

您可以通过在 carousel 元素上的类中添加“垂直”并稍微更改回答建议的 css 来使其与 angular bootstrap ui 一起工作：

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>

【讨论】：