[英]Angular: UI-Bootstrap Carouselle
I am trying to work with the ui-angular library. 我正在尝试使用ui-angular库。 I am working with the image carouselle, it works ok, but I cannot get the css the right way.
我正在使用图像轮播,它可以正常工作,但是我无法以正确的方式获取CSS。
Example pictures of the problem: 问题的示例图片:
This is the code I have right now: 这是我现在拥有的代码:
mystyle.css: mystyle.css:
.headercontainer {
margin: 50px 0 0 0;
height: 600px;
background-color: rgba(0,0,0,0.5) !important;
}
project.html: project.html:
<div class="headercontainer">
<uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
<uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
<img ng-src="{{slide.image}}" style="margin:auto;" />
<div class="carousel-caption">
<h4>Slide {{slide.id}}</h4>
<p>{{slide.text}}</p>
</div>
</uib-slide>
</uib-carousel>
</div>
app.js: app.js:
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
$scope.active = 0;
var slides = $scope.slides = [];
var currIndex = 0;
$scope.addSlide = function() {
slides.push({
image: 'img/projects/photo-1453060113865-968cea1ad53a.jpg',
text: 'Nice image',
id: 0
});
slides.push({
image: 'img/projects/photo-1454165205744-3b78555e5572.jpg',
text: 'Awesome photograph',
id: 1
});
slides.push({
image: 'img/projects/programming.jpg',
text: 'Awesome photograph',
id: 2
});
};
The gray you are seeing around the slides is just the fill space by ui-bootstrap since your images do not fit the full height and width of the carousel. 幻灯片周围看到的灰色只是ui-bootstrap的填充空间,因为您的图像无法适应轮播的整个高度和宽度。 You can simply apply a fixed height and width to your container div, and then apply that same height and width (or slightly less) to your images.
您可以简单地将固定的高度和宽度应用于容器div,然后将相同的高度和宽度(或更小)应用于图像。
For example (using inline styling): 例如(使用内联样式):
<div style="height:300px; width: 700px;">
<uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
<uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
<img ng-src="{{slide.image}}"style="margin: auto; height:300px; width: 700px;" />
<div class="carousel-caption">
<h4>Slide {{slide.id}}</h4>
<p>{{slide.text}}</p>
</div>
</uib-slide>
</uib-carousel>
Play around with the sizes until you get it like you want. 尝试各种尺寸,直到获得所需的尺寸为止。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.