圖片庫 - 滑塊

Question

我開發了一個圖片庫。 在主框（大框）中，我介紹了陣列的第一幅圖像，其余圖像水平排列在該圖像下方。

有沒有辦法讓大盒子充當圖像滑塊？

在這一點上嘗試申請，但是我有一些問題:( 次要圖像沒有出現在主圖像下方，滑塊也不能正常工作，當我移動到第二個圖像時，所有其他圖像都已加載。

我選擇使用 * ngFor 來加載次要圖像，以防我可以擁有一個圖像數量不確定的數組。

演示

代碼

<div class="col-md-6">
    <div class="drop">
        <div class="abc">
            <img class="img-fluid Images" [src]="images[0].img" >
          </div>
        </div>
        <div class="row">
            <div class="Upcard" *ngFor="let img of images | slice:1" cdkDrag>

                <img class="img-thumbnail" [src]="img.img" style="width: 100%; height: 100%;">
          </div>
            </div>
        </div>


        <!-- -------------------------------SLIDER----------- -->


        <div class="col-md-6">
            <ngb-carousel *ngIf="images">
                <div class="drop">
                    <div class="abc">
                        <ng-template ngbSlide>
                            <img [src]="images[0].img" alt="Random first slide">
                        </ng-template>
                    </div>
                </div>
                <ng-template ngbSlide>
                    <div class="row">
                        <div class="Upcard" *ngFor="let img of images | slice:1" cdkDrag>

                            <img class="img-thumbnail" [src]="img.img" style="width: 100%; height: 100%;">
          </div>
                        </div>
                </ng-template>
            </ngb-carousel>
        </div>

我想要的功能滑塊

我打算單擊滑塊上的按鈕時，它將顯示次要圖像（主圖像下方顯示的圖像）

Answer 1

您必須使用corousel-Api來獲取更改事件。

當圖像更改（自動或通過按鈕）時，corousel 會發出幻燈片事件，因此您必須將事件添加到 corousel 更改中，我已將更改（$ 事件）添加到（幻燈片）輸出。

<ngb-carousel id="carousel" #carouse *ngIf="data" (slide)="change($event)" >
  <ng-template *ngFor="let imgIdx of data; let i = index" [id]="i" ngbSlide>
    <div class="picsum-img-wrapper">
      <img [src]="imgIdx.image" [alt]="">
    </div>
    <div class="carousel-caption">
      <h3>{{imgIdx.head}}</h3>
      <p>{{imgIdx.data}}</p>
    </div>
  </ng-template>
</ngb-carousel>

<div *ngFor="let imgIdx of belowImageData; let i = index" style="width:80px" >
 <img class="col-sm" [src]="imgIdx.image" style="width: 100%; height: 100%;">
</div>

然后在 chnage 事件中，我根據上層旋轉木馬中的圖像更新了 underImageData 數組。

  constructor(){
  this.belowImageData = JSON.parse(JSON.stringify(this.data));
  this.belowImageData.splice(0,1);
  }

  change(data){
    console.log(data.current)
    this.belowImageData = JSON.parse(JSON.stringify(this.data));
    this.belowImageData.splice(data.current, 1);
  }

您也可以添加此行來暫停自動滑動

this.carousel.pause();

我已經為你開發了一個stackblitz （沒有適當的 css）。