Ok let me change my question how to get the selected item as first item in carousel? This is my code. where output images is the loop to get the images to display in carousel. where carouselimage is the boolean variable to display carousel.

 if (this.window.IndustryXCarousel && this.outputimages && this.outputimages?.length >= 0 && this.isCarouselImage) {
  const outputModalCarousel = document.getElementsByClassName("output-modal-carousel");
  Array.prototype.map.call(outputModalCarousel, (outputCaro: any) => {
    const parent = outputCaro.closest(".-modal");
    let parentStyle = window.getComputedStyle(parent, null).display;
    if (parentStyle == "block") {
      let IndustryXCarousel = window.IndustryXCarousel;
      let outputObj = null;
      console.log(outputObj)
      outputObj = new IndustryXCarousel(outputCaro, {
        items: 3,
        firstItemFixed: false,
        arrows: true,
        dots: false,
        leftArrow: `<i ></i>`,
        rightArrow: `<i ></i>`,
        margin: 40,
        responsive: [
          {
            maxWidth: 1500,
            items: 1,
          },
          {
            maxWidth: 1250,
            items: 1,
          },
          {
            maxWidth: 600,
            items: 1,
          },
        ],
      });
    }

  });
  this.isCarouselImage = false;
}

CodePudding user response：

you can do let i = index in the directive params and thus you will know the index

<div *ngFor="let item of items; let i = index">
   <button (click)="slideTo((i   1)%items.length)">next</button>
   ....