我正在使用Bootstrap在我的网站上显示传送带,并且在this example之后每张幻灯片显示多个项目。使用静态图像效果很好,我对结果感到非常高兴(例如this jsFiddle,确保显示帧足够大以避免由于boostrap的媒体查询造成的奇怪效果,我将在后面关注)。每张幻灯片和AngularJS带有多个项目的自举传送带
但是现在,我想从一个变量中定义轮播的内容,并使用一个ng-repeat
将它与AngularJS绑定。这就是发生问题的地方。数据正确绑定,但仅显示被视为“活动”项目的图像。我明白这是有道理的,但它不像静态定义的图像那样。看到this jsFiddle看到我的错误。
我试过到目前为止:
- 显示所有项目,并设置溢出:隐藏
- 更改项目大小到33%,并显示了一切,而不是使用类COL-MD-4
HTML
<div class="carousel-started-themes" style="height:150px; width:700px;">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item" ng-class="{active:!$index}" ng-repeat="img in image">
<div class="col-md-4"><a href="#"><img ng-src="{{img}}" class="img-responsive"></a>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev" style="z-index:10000;"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next" style="z-index:10000;"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
JS
function MyCtrl($scope) {
$scope.image =["https://wallpaperscraft.com/image/minimalism_sky_clouds_sun_mountains_lake_landscape_95458_1600x900.jpg", "https://wallpaperscraft.com/image/clouds_milky_way_eclipse_light_68883_1600x900.jpg", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSl5bsNT-Qtm0tfbydXFMuFCG27Kug6D5Z3hrgitIQqQq22Da95Ig", "https://wallpaper.wiki/wp-content/uploads/2017/05/Photos-1600x900-Wallpapers-HD.jpg", "https://wallpaperscraft.com/image/torzhok_tver_region_evening_sunset_river_reflection_autumn_russia_58028_1600x900.jpg", "https://wallpaper.wiki/wp-content/uploads/2017/04/wallpaper.wiki-1600x900-HD-Image-PIC-WPD0014727.jpg"];
}
$('#myCarousel').carousel({
interval: false
});
$('.carousel .item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
我不确定我明白你的意思,因为我没有“显示或隐藏”任何东西,所以项目的活动状态是Bootstrap轮播的原生状态。我尝试手动显示一切和溢出:隐藏;但不幸的是,行为大致相同。 – Driblou