角动态轮播活动类 [英] Angular Dynamic Carousel Active Class

问题描述

我有一个动态轮播，我是直接从节点后端提取图像。一切正常，除了我的轮播一次显示所有图像 而不是滑动显示，因为只有第一个滑块需要激活。

 < div class = carousel-inner> 
< div * ngFor =让图库数据显示；让i = index class = item active> 
< img src = {{data}} alt = {{name}}> 
< div class = container> 
< div class = carousel-caption> 
 
< / div> 
< / div> 
< / div> 
< / div> 
  

如何仅使第一个动态滑块在转盘中具有活动类？

解决方案

有很多方法可以做到这一点，一种简单的方法是将类分配与希望激活的索引绑定在一起。也许是这样的：

 < div class = carousel-inner> 
< div * ngFor =让画廊的数据；让i = index [class] =（i === activeIndex）？'active'：'inactive'> 
< img src = {{data}} alt = {{name}}> 
< div class = container> 
< div class = carousel-caption> 
 
< / div> 
< / div> 
< / div> 
< / div> 
  

其中activeIndex是您选择的组件变量，是要激活的数据项的索引。 / p>

或更详细的选择过程，将其绑定到javascript函数：

 < div class = carousel-inner> 
< div * ngFor =让图库数据；让i = index [class] = setClass（data，i）> 
< img src = {{data}} alt = {{name}}> 
< div class = container> 
< div class = carousel-caption> 
 
< / div> 
< / div> 
< / div> 
< / div> 
  

现在在您的组件中：

  setClass（data：DataType，i：number）{
 let class：string ='inactive'; 
 / *更复杂的选择逻辑来设置类别=活动 * / 
返回类别； 
} 
  

I have a dynamic carousel and I'm pulling images directly from a node backend. Everything is working fine except my carousel is displaying all images at once instead of in a sliding motion because only the first slider needs to be active.

          <div class="carousel-inner">
              <div *ngFor="let data of gallery; let i=index" class="item active">
                  <img src="{{ data }}" alt="{{ name }}">
                  <div class="container">
                      <div class="carousel-caption">

                      </div>
                  </div>
              </div>
          </div>

How do I make only the first dynamic slider to have the active class in the carousel?

解决方案

There are many ways to do this, one simple way is to tie the class assignment to which index you wish to be active. Perhaps something like this:

<div class="carousel-inner">
    <div *ngFor="let data of gallery; let i=index" [class]="(i === activeIndex) ? 'active' : 'inactive'">
        <img src="{{ data }}" alt="{{ name }}">
        <div class="container">
            <div class="carousel-caption">

            </div>
        </div>
    </div>
</div>

Where activeIndex is a component variable you choose which is the index of the data item you want active.

Or for a more detailed selection process tie it to a javascript function:

<div class="carousel-inner">
    <div *ngFor="let data of gallery; let i=index" [class]="setClass(data, i)">
        <img src="{{ data }}" alt="{{ name }}">
        <div class="container">
            <div class="carousel-caption">

            </div>
        </div>
    </div>
</div>

And now in your component:

setClass(data: DataType, i: number) {
    let class: string = 'inactive';
    /* more complex choice logic to set class = 'active' */
    return class;
}

这篇关于角动态轮播活动类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！