图片库 - 滑块
Image Gallery - Slider
我开发了一个图片库。在一个主框(大框)中我引入了数组的第一张图像,其余的都水平排列在该图像下方。
有没有办法让大盒子充当图像滑块?
此时尝试应用,但是我遇到了一些问题:(次要图像没有出现在主图像下方,滑块也没有正常工作,当我移动到第二个图像时,所有其他图像都已加载.
我选择使用 * 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>
我想要的功能滑块
我打算在单击滑块上的按钮时显示次要图像(显示在主图像下方的图像)
您必须使用 corousel-Api 来获取更改事件。
corousel 在图像改变时发出 slide 事件(自动或通过按钮)
所以你必须添加一个事件到 corousel change 我已经添加了 change($event) to (slide) output.
<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 事件中,我已经根据位于上部旋转木马中的图像更新了 belowImageData 数组。
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)。
我开发了一个图片库。在一个主框(大框)中我引入了数组的第一张图像,其余的都水平排列在该图像下方。
有没有办法让大盒子充当图像滑块?
此时尝试应用,但是我遇到了一些问题:(次要图像没有出现在主图像下方,滑块也没有正常工作,当我移动到第二个图像时,所有其他图像都已加载.
我选择使用 * 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>
我想要的功能滑块
我打算在单击滑块上的按钮时显示次要图像(显示在主图像下方的图像)
您必须使用 corousel-Api 来获取更改事件。
corousel 在图像改变时发出 slide 事件(自动或通过按钮) 所以你必须添加一个事件到 corousel change 我已经添加了 change($event) to (slide) output.
<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 事件中,我已经根据位于上部旋转木马中的图像更新了 belowImageData 数组。
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)。