Angular, 如何将计时器添加到轮播中？

Question

我按照网站上的教程创建了轮播。这是我的轮播的 html 代码；

<div class="row carousel" (mouseover)="mouseCheck()">
                    <!-- For the prev control button -->
                    <button class="control" style="left: 30px;" (click)="prevButton()">
                        <span class="arrow" style="transform: rotate(45deg);"></span>
                    </button>

                    <div class="row car-align">

                        <div *ngFor="let i of currentSlide;" style="width: 184px;" class="card CardBtw">
                            <div @carouselAnimation>
                               <!-- SOME CODE IN HERE -->     
                            </div>
                        </div>

                    </div>

                    <!-- For the control buttons -->
                    <button class="control" style="right: 30px;" (click)="nextButton()">
                        <span class="arrow" style="transform: rotate(225deg);"></span>
                    </button>                    
                </div>

我已经成功实现了一个动画。我想要的是让这个旋转木马每 10 秒循环一次，而鼠标不在旋转木马上。如果用户将鼠标放在旋转木马上，则让这 10 秒从头开始。我实现了一个名为“mouseCheck()”的函数来检测鼠标是否在这个 .但是我无法每 10 秒完成一次循环。我该怎么做？

编辑：

这是你们都想要的代码。当鼠标打开时，我的鼠标悬停功能只是控制台日志（我创建了它但无法填充它，因为我无法跟踪时间：/）

I select 并借助下一个和上一个按钮隐藏显示矢量。这是 .ts 中的函数（只是下一个按钮函数，cus prev 与此类似）；

//Start from the first vector
  currentSlide = this.laptopSlide[0];

  nextButton() {
      //If the currentSlide is 0
      if(this.currentSlide == this.laptopSlide[0])
        this.currentSlide = this.laptopSlide[1]
      //If currentSlide is 1
      else if(this.currentSlide == this.laptopSlide[1])
        this.currentSlide = this.laptopSlide[2]
      //If current slide is 2
      else if(this.currentSlide == this.laptopSlide[2])
        this.currentSlide = this.laptopSlide[0];
    }

Answer 1

you can create setTimeout function on mouseCheck() fn.

  mouseCheck() {
   if (condiction1 or click == true){
     on.click() => {
         "Give me a function conditione"
      }
    }else {
     setTimeOut({
       console.log("Change by inner content from typescript code on my component")
     }, 2000)
  }

Angular, 如何将计时器添加到轮播中？

Angular, how to add timer into carousel?

html

css

carousel

typescript

angular