I have put together a carousel based on a tutorial I found on a website. Check out the HTML code for my carousel below:
<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>
After successfully implementing an animation, I now aim to make the carousel cycle every 10 seconds when the mouse is not hovering over it. If the user places their mouse on the carousel, I want the countdown to reset and start from the beginning. I've created a function called "mouseCheck()" to monitor if the mouse is on the carousel but I'm struggling with setting up the 10-second cycle. Any suggestions on how to achieve this?
EDIT:
As requested, here are the relevant codes. My mouseover function currently only logs a message when the mouse is detected (I haven't fully implemented it as I'm having trouble tracking time). When using the next and previous buttons, I hide and reveal the appropriate vector. Here's the TypeScript function for the next button:
//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];
}