[UPDATE] 我使用角度2旋转木马,在这里:
https://embed.plnkr.co/ScE0uqfd0ZvL6T9j1XjL/
我想添加过渡效果。
在carousel-example ts中我添加了属性
<carousel [interval]="NextPhotoInterval" [noWrap]="noLoopSlides" [noTransition]="noTrans">
noTrans属性我在carousel-example.ts中声明为私有noTrans:boolean = false;
noTransition在carousel组件中是
@Input() public noTransition:boolean;
(默认情况下noTrans为false,文档应该启用转换)。
这没有做任何事情,我看不到任何过渡。有谁知道我哪里错了?
谢谢!
最后我使用bootstrap实现了我的通用轮播,所以我会发布我是如何做到的,以便在有人想要使用它时提供帮助:
component.html:
<div id="carousel-generic" class="carousel slide" data-ride="carousel" *ngIf="newsData">
<ol class="carousel-indicators" [hidden]="newsData.length <=1">
<li data-target="#carousel-generic" *ngFor="let news of newsData; let i= index" attr.data-slide-to="{{i}}" [ngClass]="{active: isActive(news)}"></li>
</ol>
<div class="carousel-inner news-loading" role="listbox">
<div *ngFor="let news of newsData;" class="item" [ngClass]="{active: isActive(news)}">
<h4 class="center">{{news.Title}}</h4>
<img class="img-responsive" [src]="news.ImageUrl">
<div class="news">
<p><a target="_blank" href="{{news?.DetailsUrl}}">{{news.Text}}</a></p>
</div>
</div>
<a class="left carousel-control" href="#carousel-generic" role="button" data-slide="prev" [hidden]="!newsData.length">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-generic" role="button" data-slide="next" [hidden]="!newsData.length">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
component.ts:
@Component({
selector: 'my-component',
templateUrl: 'app/components/component.html'
})
export class NewsComponent implements OnInit{
private newsData: NewsDataModel[];
constructor(private _service: MyService) {}
private isActive(news:any){
return news === this._service.newsData[0];
}
ngOnInit() {
this.newsData = this._service.newsData;
}
}
*我在我的服务中订阅了()