Unable to display the Bootstrap Carousel correctly in Angular2+

Here, I am using Bootstrap 3.3.7 and Angular 4. My issue is that I am trying to display the number of pics in Bootstrap Carousel and in each slide I am trying to display 3 pics. Till now, I am getting data from an array and here after the last pic ends. Then, the first pic has to follow instantly but now I am getting all my images in a single page. Below is 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"
    },
    { 
      "ImageUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSW6QPbLZN-2Xs4Jb6DMZKivwTQtw5L3QH5AjJf4fPM8pubZato2Q"
    },
    {  
      "ImageUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSW6QPbLZN-2Xs4Jb6DMZKivwTQtw5L3QH5AjJf4fPM8pubZato2Q"
    },
    {   
      "ImageUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSW6QPbLZN-2Xs4Jb6DMZKivwTQtw5L3QH5AjJf4fPM8pubZato2Q"
    },
    {    
      "ImageUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSW6QPbLZN-2Xs4Jb6DMZKivwTQtw5L3QH5AjJf4fPM8pubZato2Q"
    },
    {   
      "ImageUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSW6QPbLZN-2Xs4Jb6DMZKivwTQtw5L3QH5AjJf4fPM8pubZato2Q"
     },
     {
      "ImageUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSW6QPbLZN-2Xs4Jb6DMZKivwTQtw5L3QH5AjJf4fPM8pubZato2Q"
    },
    {    
      "ImageUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSW6QPbLZN-2Xs4Jb6DMZKivwTQtw5L3QH5AjJf4fPM8pubZato2Q"
    }
  ];
  constructor() { }
  ngOnInit() {
  }
}

Below are solutions which I am getting:

enter image description here

1 answer

  • answered 2018-07-11 04:40 caiovisk

    In bootstrap carousel each .item is the actual slider. So, if you want to have a slider with 3 images inside, you have to place your .col-sm-4 and loop it tree times inside the .item. You may have to update your images object.

    See: https://angular-52pqo7.stackblitz.io

    Editor: https://stackblitz.com/edit/angular-52pqo7

    Data Json:

    DataOne:any=[{
            "sliderImages": [{
                    "ImageUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSW6QPbLZN-2Xs4Jb6DMZKivwTQtw5L3QH5AjJf4fPM8pubZato2Q"
                },
                {
                    "ImageUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSW6QPbLZN-2Xs4Jb6DMZKivwTQtw5L3QH5AjJf4fPM8pubZato2Q"
                },
                {
                    "ImageUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSW6QPbLZN-2Xs4Jb6DMZKivwTQtw5L3QH5AjJf4fPM8pubZato2Q"
                }
            ]
        },
        {
            "sliderImages": [{
                    "ImageUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSW6QPbLZN-2Xs4Jb6DMZKivwTQtw5L3QH5AjJf4fPM8pubZato2Q"
                },
                {
                    "ImageUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSW6QPbLZN-2Xs4Jb6DMZKivwTQtw5L3QH5AjJf4fPM8pubZato2Q"
                },
                {
                    "ImageUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSW6QPbLZN-2Xs4Jb6DMZKivwTQtw5L3QH5AjJf4fPM8pubZato2Q"
                }
            ]
        }
    ]
    

    Carousel:

    <div class="container">
      <h2>Carousel Example</h2>  
      <div id="myCarousel" class="carousel slide" data-ride="carousel"  >
          <!-- Wrapper for slides -->
          <div class="carousel-inner">
            <div class="item" 
              *ngFor="let data of  DataOne; first as isFirst;"
              [class.active]="(isFirst)"
            >
              <div class="col-sm-4" *ngFor="let slidImg of  data.sliderImages">
                <img src="{{slidImg.ImageUrl}}" alt="Los Angeles" style="width:50%;">
              </div><!-- .col-sm-4 -->
            </div><!-- .item -->
          </div><!-- .carousel-inner -->
    
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li 
              *ngFor="let data of  DataOne; index as i; first as isFirst;" 
              data-target="#myCarousel"  
              [attr.data-slide-to]="(i)"
              [class.active]="(isFirst)"></li>
          </ol>
    
        <!-- 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><!-- #myCarousel -->
    </div><!-- .container -->