时间戳

首页 > 解决方案 > 为 Angular 中的每个 mdb-carousel 项目添加间隔

angular - 为 Angular 中的每个 mdb-carousel 项目添加间隔

问题描述

我想为 mdb-carousal 中的每个项目添加不同的间隔。我发现很少有解决方案，但它是基于 jQuery 的。我想要打字稿中的解决方案。

<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>

标签： angularangular-materialcarouselmdbootstrap

解决方案

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;
    }
  }

推荐阅读