Использование bootstrap ui
Я пытаюсь сделать карусель угловой бутстрап ui, чтобы скользить вертикально, а не горизонтально без успеха до сих пор.
Кто-нибудь знает, как это сделать?
Спасибо!угловой бутстрап ui сделать карусель вертикальный слайд
Ответ здесь довольно много, что вы ищете: https://stackoverflow.com/a/30330303/635411
Вы можете заставить его работать работу с угловой бутстраповской ш путем добавления «вертикаль» в класс на carousel элементе и слегка изменяя CSS, что ответить предложил:
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>