我使用了documentation中所示的示例代码来进行引导轮播。我已经包括了所有依赖项。
-角度1.5.8
-ngAnimate 1.5.8
-Bootstrap CSS 3.3.7
由于代码相同,因此在plunker中效果很好。但是它将所有图像以静态显示在我的网站上。没有动画或滑动。任何帮助表示赞赏。
控制器代码:
import CarouselController from 'carousel/CarouselController';
import 'angular-ui-bootstrap';
import 'angular-animate';
import 'angular-sanitize';
let moduleName = angular
.module('Carousel', ['ui.bootstrap'])
.controller('CarouselController', CarouselController)
.name;
export default moduleName;
-----------------------------------------------------
function CarouselController($scope){
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
$scope.active = 0;
var slides = $scope.slides = [];
var currIndex = 0;
$scope.addSlide = function() {
var newWidth = 600 + slides.length + 1;
slides.push({
image: '//unsplash.it/' + newWidth + '/300',
text: ['Nice image','Awesome photograph','That is so cool','I love that'][slides.length % 4],
id: currIndex++
});
};
$scope.randomize = function() {
var indexes = generateIndexesArray();
assignNewIndexesToSlides(indexes);
};
for (var i = 0; i < 4; i++) {
$scope.addSlide();
}
// Randomize logic below
function assignNewIndexesToSlides(indexes) {
for (var i = 0, l = slides.length; i < l; i++) {
slides[i].id = indexes.pop();
}
}
function generateIndexesArray() {
var indexes = [];
for (var i = 0; i < currIndex; ++i) {
indexes[i] = i;
}
return shuffle(indexes);
}
// http://stackoverflow.com/questions/962802#962890
function shuffle(array) {
var tmp, current, top = array.length;
if (top) {
while (--top) {
current = Math.floor(Math.random() * (top + 1));
tmp = array[current];
array[current] = array[top];
array[top] = tmp;
}
}
return array;
}
}
export default [ '$scope', CarouselController ];
HTML:
<div ng-controller="CarouselController">
<div style="height: 305px">
<div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
<div 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>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<button type="button" class="btn btn-info" ng-click="addSlide()">Add Slide</button>
<button type="button" class="btn btn-info" ng-click="randomize()">Randomize slides</button>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="noWrapSlides">
Disable Slide Looping
</label>
</div>
</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>
最佳答案
slides.push({
image:['pathToImage', 'pathToImage1', 'pathToImageN'][slides.length],
text: ['Nice image','Awesome photograph','That is so cool','I love that'][slides.length % 4],
id: currIndex++
});
在您的代码中,您必须对其进行一些调整。
您需要一个用于图像的新数组,并且需要指定索引,在本例中为
slides.length
希望这可以帮助。
关于css - Angular UI Bootstrap轮播无法正常工作-显示静态图像,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42396638/