Question

在这里，我正在使用Bootstrap 3.3.7和Angular4。我的问题是我试图在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

在自举轮播中，每个.item是实际的滑块。因此，如果您想要一个带有3张图像的滑块，则必须放置.col-sm-4并将其树次循环到.item内。您可能需要更新图像对象。

请参阅：https://angular-52pqo7.stackblitz.io

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

数据杰森：

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

无法在Angular2 +中正确显示Bootstrap Carousel

1 个答案: