Я создал карусель по учебнику с веб-сайта. Вот 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 секунд. Как мне это сделать?
Обновлено:
Вот коды, которые вы все хотели. Моя функция наведения мыши просто регистрирует консоль, когда мышь включена (я создал ее, но не смог заполнить, потому что не мог отслеживать время:/)
Я выбираю и скрываю отображаемый вектор с помощью кнопок «Далее» и «Предыдущий». Вот функция из .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];
}
Как вы скрываете элементы карусели, которые не видны? Можете ли вы опубликовать код SCSS/CSS?
Я отредактировал вопрос в соответствии с тем, что вы хотите
вы можете создать функцию setTimeout для mouseCheck() fn.
mouseCheck() {
if (condiction1 or click == true){
on.click() => {
"Give me a function conditione"
}
}else {
setTimeOut({
console.info("Change by inner content from typescript code on my component")
}, 2000)
}
Можете также разместить код внутри
mouseCheck()
;)