css - 无法在 Angular 2 中正确显示 Bootstrap Carousel

Question

在这里，我使用的是 Bootstrap 3.3.7 和 Angular 4。我的问题是我试图在 Bootstrap Carousel 中显示图片数量，而在每张幻灯片中我试图显示 3 张图片。到现在为止，我正在从数组中获取数据，在最后一张图片结束后。然后，第一张照片必须立即跟进，但现在我将所有图像放在一个页面中。下面是我的代码:

.html代码:

<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代码:

 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() {
  }
}

以下是我得到的解决方案:

Answer 1

在 bootstrap carousel 中，每个 .item 都是实际的 slider 。因此，如果您想要一个包含 3 个图像的 slider ，您必须放置 .col-sm-4 并在 .item 中循环树次。您可能需要更新图像对象。

参见:https://angular-52pqo7.stackblitz.io

编辑:https://stackblitz.com/edit/angular-52pqo7

数据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"
            }
        ]
    }
]

轮播:

<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 -->