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

问题描述

我想为 mdb-carousal 中的每个项目添加不同的间隔.我找到了几个解决方案，但它是基于 jQuery 的.我想要 Typescript 中的解决方案.

<mdb-carousel [间隔]=1000"[isControls]=假"class =轮播幻灯片轮播淡入淡出"；[动画]="'淡入淡出'"><mdb-carousel-item><!-- 这需要显示 5 秒 --><img class="d-block w-100";src=https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg";alt=第一张幻灯片"></mdb-carousel-item><mdb-carousel-item><!-- 这需要显示 15 秒 --><img class="d-block w-100";src=https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg";alt=第二张幻灯片"></mdb-carousel-item>

解决方案

通过对可用轮播属性的更多研究，我能够解决这个问题:下面是解决方案.

在 HTML 中，我们需要使用可用于幻灯片事件的 activeSlideChange 方法将轮播组件传递回 Typescript.还需要为每个carousel item添加id以供参考

-- HTML

<mdb-carousel #carousal [间隔]=1000";[isControls]=假"class =轮播幻灯片轮播淡入淡出"；[动画]="'淡入淡出'";(activeSlideChange)="activeSlideChange(carousal)";><mdb-carousel-item id='home'><!-- 这需要显示 5 秒 --><img class="d-block w-100";src=https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg";alt=第一张幻灯片"></mdb-carousel-item><mdb-carousel-item id='time'><!-- 这需要显示 15 秒 --><img class="d-block w-100";src=https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg";alt=第二张幻灯片"></mdb-carousel-item></mdb-carousel>

在打字稿中，我们可以像这样定义activeSlideChange方法

 activeSlideChange(cc: CarouselComponent){让 slideItem = cc.slides[cc.activeSlide];让 id = slideItem.el.nativeElement.id;控制台日志(ID)；如果 ( id === '家') {cc.interval = 1000 * 5 ;//5 秒} else if ( id === '时间') {cc.interval = 1000 * 15;//15 秒}别的  {cc.interval = 5000;}}

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>

解决方案

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

这篇关于为 Angular 中的每个 mdb-carousel 项目添加间隔的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！