[英]Image Gallery - Slider
I developed an image gallery.我开发了一个图片库。 In a main box (large box) I introduce the first image of the array, the rest are arranged horizontally below that image.在主框(大框)中,我介绍了阵列的第一幅图像,其余图像水平排列在该图像下方。
Is there a way to get the big box to function as an image slider?有没有办法让大盒子充当图像滑块?
At this point try to apply, however I have some problems :( the secondary images do not appear below the main one, nor is the slider working correctly, when I move to the second image, all the others are loaded.在这一点上尝试申请,但是我有一些问题:( 次要图像没有出现在主图像下方,滑块也不能正常工作,当我移动到第二个图像时,所有其他图像都已加载。
I chose to use * ngFor to load secondary images, in case I can have an array with indeterminate quantities of images.我选择使用 * ngFor 来加载次要图像,以防我可以拥有一个图像数量不确定的数组。
CODE代码
<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>
What I want with the functional slider我想要的功能滑块
I intend that when clicking on the buttons on the slider it will display the secondary images (the images shown below the main image)我打算单击滑块上的按钮时,它将显示次要图像(主图像下方显示的图像)
you have to use corousel-Api to get change event.您必须使用corousel-Api来获取更改事件。
corousel emit slide event when image is change(automatic or via button) so you have to add an event to corousel change i have added change($event) to (slide) output.当图像更改(自动或通过按钮)时,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>
then in chnage event i have updated belowImageData array according to image loded in upper corousel.然后在 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);
}
you can also add this line to pause automatic slide您也可以添加此行来暂停自动滑动
this.carousel.pause();
i have developed a stackblitz for you(without proper css).我已经为你开发了一个stackblitz (没有适当的 css)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.