I am currently working with Bootstrap 3.3.7 and Angular 4 for a project. My challenge lies in displaying multiple images in a Bootstrap Carousel, with the aim of showing three images per slide. However, I am encountering an issue where all the images are being displayed on a single page rather than within the Carousel setup. Below is a snippet of my code:
.html code:
<div class="container">
<h2>Carousel Example</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel" >
<div class="col-sm-4" *ngFor="let data of DataOne;let i = index" >
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" [attr.data-slide-to]="i" class="active"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="{{data.ImageUrl}}" alt="Los Angeles" style="width:50%;">
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
.ts code:
export class TestComponent implements OnInit {
DataOne:any=[
{
"ImageUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSW6QPbLZN-2Xs4Jb6DMZKivwTQtw5L3QH5AjJf4fPM8pubZato2Q"
},
{
// additional image objects here
}
];
constructor() { }
ngOnInit() {
}
}
Here's an illustration of the current problem: