Angular, как добавить таймер в карусель?

Я создал карусель по учебнику с веб-сайта. Вот 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];
    }

Можете также разместить код внутри mouseCheck() ;)

Sivakumar Tadisetti 21.12.2020 17:15

Как вы скрываете элементы карусели, которые не видны? Можете ли вы опубликовать код SCSS/CSS?

roguib 21.12.2020 17:32

Я отредактировал вопрос в соответствии с тем, что вы хотите

Michael Jordan 22.12.2020 07:10
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
3
487
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

вы можете создать функцию 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)
  }

Другие вопросы по теме