Question

我正在使用Angular 6和ng-bootstrap并尝试使用轮播。

轮播工作正常，但无法在一个滑块中显示4张图像。在每个滑块中显示1张图像。

这是通过API响应获得的数据：

  games= [{"title_id":1,"title_name":"MIssion Impossible","title_img":"https://media.services.cinergy.ch/media/box1600/f1323e57a2c4ea79dde779a89d561f85bfbe6bf5.jpg","genres":[{"id":1,"name":"Action"},{"id":2,"name":"Adventure"}]},{"title_id":2,"title_name":"Matrix","title_img":"https://www.sideshowtoy.com/assets/products/903302-neo/lg/the-matrix-neo-sixth-scale-figure-hot-toys-903302-01.jpg","genres":[{"id":1,"name":"Action"},{"id":2,"name":"Adventure"},{"id":6,"name":"Fantasy"}]},{"title_id":3,"title_name":"Avengers","title_img":"http://media.comicbook.com/2018/03/avengers-infinity-war-poster-all-iron-man-version-1096449.jpeg","genres":[{"id":1,"name":"Action"},{"id":2,"name":"Adventure"},{"id":6,"name":"Fantasy"}]},{"title_id":4,"title_name":"Stargate SG-1","title_img":"https://image.tmdb.org/t/p/w300_and_h450_bestv2/rst5xc4f7v1KiDiQjzDiZqLtBpl.jpg","genres":[{"id":1,"name":"Action"},{"id":5,"name":"Drama"},{"id":2,"name":"Adventure"},{"id":9,"name":"Sci Fi"}]},{"title_id":5,"title_name":"Scooby Doo","title_img":"https://images-na.ssl-images-amazon.com/images/G/01/aplusautomation/vendorimages/1cdd3ea2-f14f-416b-9aaa-644a9a01ad8c.jpg._CB321085566_.jpg","genres":[{"id":1,"name":"Action"},{"id":10,"name":"Thriller"},{"id":6,"name":"Fantasy"}]}];

这是我的component.html代码：

<ngb-carousel *ngIf="games" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
    <ng-template ngbSlide *ngFor="let image of games" style="">
        <div class="" style="">
            <div class="col-xs-3 col-md-3 col-lg-3 col-sm-6">
                <img class="" src="{{image.title_img}}" width="" >
            </div>
        </div>
    </ng-template>
</ngb-carousel>

每张幻灯片的每张图片都来了。

我尝试了如下静态图像

<ngb-carousel *ngIf="games" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
    <ng-template ngbSlide  style="">
        <div class="">
            <img src="https://media.services.cinergy.ch/media/box1600/f1323e57a2c4ea79dde779a89d561f85bfbe6bf5.jpg" width="200px" class="img-responsive" style="float:left">
            <img src="https://www.sideshowtoy.com/assets/products/903302-neo/lg/the-matrix-neo-sixth-scale-figure-hot-toys-903302-01.jpg"  width="200px" class="img-responsive" style="float:left">
            <img src="http://media.comicbook.com/2018/03/avengers-infinity-war-poster-all-iron-man-version-1096449.jpeg"  width="200px"  class="img-responsive" style="float:left">
        </div>
    </ng-template>
    <ng-template ngbSlide  style="">
        <div class="">
            <img src="https://media.services.cinergy.ch/media/box1600/f1323e57a2c4ea79dde779a89d561f85bfbe6bf5.jpg" width="200px" class="img-responsive" style="float:left">
            <img src="https://www.sideshowtoy.com/assets/products/903302-neo/lg/the-matrix-neo-sixth-scale-figure-hot-toys-903302-01.jpg"  width="200px" class="img-responsive" style="float:left">
            <img src="http://media.comicbook.com/2018/03/avengers-infinity-war-poster-all-iron-man-version-1096449.jpeg"  width="200px"  class="img-responsive" style="float:left">
        </div>
    </ng-template>
</ngb-carousel>

结果是：

但是，在移动设备中，显示的数字低于1。我只需要显示一张图像，单击箭头导航时应该显示下一张图像

Answer 1

这是一种可能的解决方案：

单独的台式机和移动版：

将桌面版本与移动版本分开，每个版本都有一个ngb轮播，并通过* ngIf选择。 * ngIf检查由定义的变量mobile（请参见下面的html）：

ngOnInit() {
  if (window.screen.width === 360) { // 768px portrait
    this.mobile = true;
  }
}

有关this question的更多信息。

滑块

对于移动版本，请使用您的代码（我在下面进行了集成）

对于具有多个图像的桌面：

将您的数组划分为多维数组（幻灯片的第一维，图像的第二维）。如果您有2张包含3张图片的幻灯片，则您的数组将是2 * 3张。

this.games = ["a", "b", "c", "d", "e"];
this.gamesFormatted = [];
var j = -1;

for (var i = 0; i < this.games.length; i++) {
    if (i % 3 == 0) {
        j++;
        this.gamesFormatted[j] = [];
        this.gamesFormatted[j].push(this.games[i]);
    }
    else {
        this.gamesFormatted[j].push(this.games[i]);
    }
}

以双循环显示轮播：

<div *ngIf="games">
    <!-- Mobile section : one image per slide -->
    <ngb-carousel *ngIf="mobile" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
        <ng-template ngbSlide *ngFor="let image of games">
            <div class="" style="">
                <div class="col-xs-3 col-md-3 col-lg-3 col-sm-6">
                    <img class="" src="{{image.title_img}}">
                </div>
            </div>
        </ng-template>
    </ngb-carousel>

    <!-- Desktop section : multiple images per slide -->
    <ngb-carousel *ngIf="!mobile" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
        <ng-template ngbSlide *ngFor="let group of gamesFormatted">
            <div class="" style="" *ngFor="let game of group">
                    <img class="" src="{{game.title_img}}">
            </div>
        </ng-template>
    </ngb-carousel>
</div>

我没有测试html部分，因此肯定有待改进。

Answer 2

您是否尝试过这种方法？

<ngb-carousel *ngIf="games" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators"> <ng-template ngbSlide style=""> <div class=""> <img src="https://media.services.cinergy.ch/media/box1600/f1323e57a2c4ea79dde779a89d561f85bfbe6bf5.jpg" width="200px" class="img-responsive" style="float:left"> </div> <div class=""> <img src="https://www.sideshowtoy.com/assets/products/903302-neo/lg/the-matrix-neo-sixth-scale-figure-hot-toys-903302-01.jpg" width="200px" class="img-responsive" style="float:left"> </div> <div class=""> <img src="http://media.comicbook.com/2018/03/avengers-infinity-war-poster-all-iron-man-version-1096449.jpeg" width="200px" class="img-responsive" style="float:left"> </div> </ng-template> </ngb-carousel>

使用ngb-carousel

2 个答案: