Question

我试图创建一个网站，其中有很多div正在显示* ngFor循环。这是代码

<div class="container-fluid" style="background-color: #151923; background-size: cover; padding: 0; min-height: 100vh;">
<h3 style="text-align: center; color: floralwhite">Clients Aperçus !</h3>
<div class="row" style="margin-top: 60px;">
    <div class="row">
        <div class="col-xs-3" *ngFor="let client of getClients()" style="text-align: center;" data-toggle="modal" data-target="#modalClientEdit" data-dismiss="modal" (click)="onDisplayClient(client)">
            <img *ngIf="client.recognize === true" class="img-circle avatarBlue" src={{client.pict}} style="width: 250px; height: 250px;" alt="Img">
            <img *ngIf="client.recognize === false" class="img-circle avatarRed" src={{client.pict}} style="width: 250px; height: 250px;" alt="Img">
            <p>{{client.firstName}} {{client.lastName}}</p>
            <img *ngIf="client.language.indexOf('FR') > -1" src="../../assets/blank.gif" class="flag flag-fr"/>
            <img *ngIf="client.language.indexOf('GB') > -1" src="../../assets/blank.gif" class="flag flag-gb"/>
            <img *ngIf="client.language.indexOf('CN') > -1" src="../../assets/blank.gif" class="flag flag-cn"/>
            <img *ngIf="client.language.indexOf('JP') > -1" src="../../assets/blank.gif" class="flag flag-jp"/>
            <img *ngIf="client.language.indexOf('DE') > -1" src="../../assets/blank.gif" class="flag flag-de"/>
            <img *ngIf="client.language.indexOf('IT') > -1" src="../../assets/blank.gif" class="flag flag-it"/>
            <img *ngIf="client.language.indexOf('ES') > -1" src="../../assets/blank.gif" class="flag flag-es"/>
        </div>
    </div>
</div>

因为每个div都有＆＃34; col-xs-3＆＃34; class，一行只显示4个div。如果要显示5个元素，则第五个元素将位于第一行下方。我想要实现的是像＃＆＃34;类似旋转木马＆＃34;行为。例如，如果我的列表有8个元素，则只显示第四个元素，并且显示＆＃34;右箭头＆＃34;将能够显示下一个第四个。我不知道我怎么能做到这一点。我一直在看一些有关多元素内部旋转木马的帖子，但我不确定这是否正确。

角度 - 多个div元素幻灯片

0 个答案: