Currently, I am utilizing Bootstrap to showcase a carousel on my website, where multiple items are displayed per slide as demonstrated in this example. The use of static images has yielded satisfactory results, as evidenced by the jsFiddle example found here (ensure that the display frame is sufficiently large to avoid any issues caused by Bootstrap's media queries, which will be addressed later).
Nevertheless, I am now attempting to define the content of the carousel using a variable and bind it with AngularJS through an ng-repeat directive. However, an issue arises where only the image identified as the "active" item is being displayed. This behavior differs from when statically defined images were used. To see the problem in action, refer to this jsFiddle.
Here are some solutions I have attempted so far :
- Show all items and set overflow:hidden
- Adjust item size to 33% and display all items instead of using the col-md-4 class
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));
}
});