javascript - 如何使轮播的上一个和下一个按钮工作？

Question

我有两个不同的部分，我正在使用 *ngfor 循环重复

对于第一部分 Prev 和 Next 正在工作，但对于第二部分 prev 和 next 按钮仅更改第一部分图像而不是第二部分。

这是我使用轮播更改图像的 Prev 和 Next Button 代码：

<div class="d-flex justify-content-center ">
                <span (click)="OnPrivClick()" class="targe prevDesable">
                    
                    <a href="#carouselExampleControls" role="button" data-slide="prev" class="removeline">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                      <div style="width: 60px;">
                            <div id="holderpre" style="font-size: 14px; color: #000000; text-align: center;">
                              <div id="maskpre"></div>
                              <div id="maskpre"></div>
                              <div id="mask"></div>
                              <i class="fa fa-arrow-left preiocon"></i>
                              <span class="prebutton">PREV</span>
                             </div>
                        </div>
                     </a>               
      </span>
                <span (click)="OnNextClick()" class="addcursor">        
        <a href="#carouselExampleControls" role="button" data-slide="next" class="removeline">
                      <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <div style="width: 133px;">
                            <div id="holder" style="font-size: 14px;color: #000000;text-align: center;">
                               <div id="mask2"></div>
                                <div id="mask1" style="position: absolute;bottom: -2px;left:0px;width:50%;height: 1px;background-color:#ffffff;border: 2px solid white">
                                </div>
                             <span class="buttcolor"> NEXT</span> &nbsp;
                             <i class="fa fa-arrow-right nexticon"></i>
                            </div>
          </div>
                    </a>
                </span>
            </div>
        </div>

这是图像代码：

<div id="carouselExampleControls" class="carousel slide">
            <div class="carousel-inner">
                <ng-container *ngFor="let space of xyz && xyz[i]; let j=index">
                    <div class="carousel-item active underlinecarosel" [ngClass]="{'active':j===0}">
                        <div class="row">
                            <div class="col-md-6 col-sm-6 col-12 col-sm-12">
                                <img [src]="xyz[i][j].attributes.document" class="d-block ">
                            </div>
                        </div>
                    </div>
                    </ng-container>
            </div>
        </div>

任何人都可以在我犯错的地方帮助我，以便第二部分的上一个和下一个按钮只会改变第二部分的图像而不是第一部分。

任何潜在客户都会有所帮助

标签： javascriptangulartypescriptbootstrap-4