Add interval for each mdb-carousel item in Angular

  angular, carousel

I wanted to add different interval for each item in mdb-carousal.
I found few solution but it is jQuery based. I want solution in Typescript.

<div> <mdb-carousel [interval]="1000" [isControls]="false" class="carousel slide carousel-fade" [animation]="'fade'">
<mdb-carousel-item>
  <!-- THIS NEEDS TO BE DISPLAYED FOR 5 SECS -->
  <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide">
</mdb-carousel-item>

<mdb-carousel-item>
  <!-- THIS NEEDS TO BE DISPLAYED FOR 15 SECS -->
  <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" alt="Second slide">
</mdb-carousel-item>

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.