1

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>
Shahid
  • 481
  • 1
  • 8
  • 22

1 Answers1

0

With little more research on the available carousel properties, I am able to solve the issue: Below is the solution.

In HTML, we need to pass the carousel component back to the Typescript using activeSlideChange method available for the slide event. Also need to add ids for each carousel item for reference

-- HTML

<div>
  <mdb-carousel  #carousal  [interval]="1000" [isControls]="false" class="carousel slide carousel-fade" [animation]="'fade'"
  (activeSlideChange)="activeSlideChange(carousal)" >
    <mdb-carousel-item id='home'>
      <!-- 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 id='time'>
      <!-- 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>
  </mdb-carousel>
</div>

In typescript, we can define the activeSlideChange method like this

 activeSlideChange(cc: CarouselComponent){
   let slideItem = cc.slides[cc.activeSlide];
   let id = slideItem.el.nativeElement.id;
   console.log(id);
    if ( id === 'home') {
        cc.interval = 1000 * 5 ; // 5 secs
    } else if ( id === 'time') { 
      cc.interval = 1000 * 15; // 15 secs
    }else  {
      cc.interval = 5000;
    }
  }
Shahid
  • 481
  • 1
  • 8
  • 22