Image Gallery - Slider

Question

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.

DEMO

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)

Answer 1

you have to use corousel-Api to get change event.

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.

<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.

  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).