我正在使用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