как выполнить следующую через несколько секунд карусель в угловом положении? - PullRequest
0 голосов
/ 05 ноября 2018

Я использую ng2-carouselamos , чтобы карусель успешно отображалась с кодом ниже.

<div
    ng2-carouselamos
    class="slides-wrapper"
    [items]="items"
    [width]="1200"
    [$prev]="prev"
    [$next]="next"
    [$item]="item">
  </div>

  <ng-template #prev>
    <img src="assets/images/left_arrow.png" id="left" />
  </ng-template>
  <ng-template #next>
    <img src="assets/images/right_arrow.png" id="right" />
  </ng-template>
  <ng-template #item let-item let-i="index">
    <div class="items">
      <img src="{{ item.name }}">
    </div>
  </ng-template> 

и ts как ниже:

this.items = [
      { name: 'assets/images/professional_website.jpg' },
      { name: 'assets/images/nature_1200_800.jpg' },
      { name: 'assets/images/nature.jpg' },
      { name: 'assets/images/nature.jpg' },
      { name: 'assets/images/nature.jpg' }, ]

как вызвать [$ next] = "next" из ts, чтобы автоматически выполнить его через 5 секунд?

Спасибо.

1 Ответ

0 голосов
/ 05 ноября 2018

Источник вашей проблемы - вызывать функцию (следующий вызов) каждые 5 секунд.

Так, как отмечено в ответ :

Вы можете использовать setInterval (), аргументы одинаковые.

setInterval(function() {
  // method to be executed;
}, 5000);

И, таким образом, в вашем случае на ngInit вы можете иметь такой код:

// we need to access programmatically the scroll function since it isn't exposed 
// by the library
@ViewChild(Ng2Carouselamos)
ng2Carouselamos : Ng2Carouselamos;

setInterval(function() {
  ng2Carouselamos.scroll(true,items);
}, 5000);

Однако, поскольку используемая вами библиотека больше не поддерживается и не имеет простых функций (таких как автоматическая прокрутка), я бы предложил выбрать более современную библиотеку компонентов (например, prime-ng , которая поддерживает это с непрерывным = верно) или Нгу-Карусель

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...