图片库 - 滑块

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