我正在使用 Bootstrap 在我的网站上显示轮播,并且我在 this example 之后的每张幻灯片中显示多个元素.使用静态图像效果非常好,我对结果非常满意(关于 this jsFiddle 的示例,确保显示框架足够大以避免由于 boostrap 的媒体查询而产生奇怪的效果,我会处理的稍后)。
但是现在,我想从一个变量定义轮播的内容,并使用 ng-repeat
将其与 AngularJS 绑定(bind)。这就是问题发生的地方。数据已正确绑定(bind),但仅显示被视为“事件”元素的图像。我知道这是有道理的,但是对于静态定义的图像,它的行为并不像那样。参见 this jsFiddle查看我的错误。
到目前为止我尝试了什么:
- 显示所有元素并设置overflow:hidden
- 将元素大小更改为 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));
}
});
最佳答案
为什么你需要显示/隐藏?也许你可以只使用 overflow:hidden;并且只使用 jquery 在没有滚动条的情况下左右滚动。这样,就永远不会有隐藏条件。
关于javascript - Bootstrap 轮播,每张幻灯片和 AngularJS 有多个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46771182/