css 旋转架Angular 问题

zdwk9cvp 于 2023-07-01 发布在 Angular

关注(0)|答案(2)|浏览(115)

我试图通过从数据库中获取旋转木马的图片来使旋转木马动态化，但我无法正确设置CSS类，因为所有的图片都在一次显示
我试图使用图像的索引，如如果它是第0个索引，这意味着第一个图像，那么我们应该使其活跃，否则使其只是旋转木马项目this is the code snippet

<div class="carousel-inner" *ngFor="let doc of   banner_arr;let i=index;">
  <h4>{{i}}</h4>
  <div class="{{i}}===0 ? 'carousel-item active' : 'carousel-item' ">
    <img src="{{doc.image_url}}"  alt="{{i}}==0?First slide:{{i}}==1?Second slide:Third slide">
  </div>
</div>

css

来源：https://stackoverflow.com/questions/76586777/carousel-issue-in-angular

2条答案

按热度按时间

swvgeqrz1#

确保“*ngFor”在div中的carousel-item类中
可以使用[ngClass]或[class.active]。
最好使用“绑定”（[``]）而不是插值

<div class="carousel-item" [class.active]="i===0">
    <img [src]="doc.image_url" 
          [attr.alt]="i==0?First slide:i==1?'Second slide':'Third slide'">
  </div>
</div>

注意：我之前在这个stackblitz中用Angular做了一个bootstrap 5 carousel，检查angular.json和package.json，要小心，因为它与Angular 12相关，但应该在Angular 15或16中工作。

赞(0）回复(0）举报 2023-07-01

ndasle7k2#

enter image description here
就像Eliseo回答的那样，在ts文件中声明这两个函数

prevSlide() {
  this.activeIndex = (this.activeIndex === 0) ? this.banner_arr.length - 1 : this.activeIndex - 1;
}

nextSlide() {
  this.activeIndex = (this.activeIndex === this.banner_arr.length - 1) ? 0 : this.activeIndex + 1;
}

赞(0）回复(0）举报 2023-07-01

我来回答

css 旋转架Angular 问题

2条答案

相关问题

热门标签

最新问答