Angular2 HTML 元素轮播答案

【问题标题】：Angular2 HTML Element CarouselAngular2 HTML 元素轮播
【发布时间】：2016-10-21 11:06:15
【问题描述】：

有人知道 angular2 的好的轮播库吗？

如https://onsen.io/v2/docs/angular2/ons-carousel-item.html，但只是轮播？

【问题讨论】：

【解决方案1】：

您可能想查看Angular2-drag-scroll，它具有鼠标拖动滚动和隐藏滚动条等功能。

用法示例：

<div drag-scroll drag-scroll-y-disabled="true" scrollbar-hidden="true" >
  <img *ngFor="let image of imagelist" [src]="'you_assets_path' + image" />
</div>

更多文档，有一个演示站点：https://bfwg.github.io/angular2-drag-scroll/

【讨论】：

【解决方案2】：

无需担心“我应该使用哪个轮播？”使用您喜欢的任何旋转木马，例如bootstrap carousel , jQuery carousel , owl carousel 等。

Angular2 不会将您与任何特定库绑定，它会自动更新其更改（不像 Angular1）。

我是这样使用它的（只是 Bootstrap 轮播）：

             <section class="learning-carousel pad-t-1 row" *ngIf="!coursesLding && itsCoursesLstDta && itsCoursesLstDta.length">
                  <div class="clearfix carousel-ms carousel slide myCrsalBook" tabindex="0" style="display: block;">
                    <div class="carousel-inner" role="listbox">
                      <div *ngFor="let item of itsCoursesLstDta;let ind=index;" [ngClass]="{'item carousel-item':true,active: ind==curCourse}">
                        <div class="course-card panel">
                          <a href="javascript:void(0)" [ngClass]="{'active':item.job_starred && !appState.get('isNotLoggedIn'),'btn-favorite pull-right':true}" (click)="starItm(''+item.id,item.job_starred,'courses');item.job_starred=!item.job_starred;"><i class="fa"></i></a>
                          <a [href]="'http://'+item.baseUrl" target="_blank">
                            <img [src]="item.imgUrl" width="85px" />
                          </a>
                          <a [href]="'http://'+item.baseUrl" target="_blank">
                            <p class="course-title" [innerHTML]="item.title"></p>
                          </a>
                          <p class="course-description" [innerHTML]="item.description" style="max-height: 100px;overflow-y: auto;"></p>
                        </div>
                      </div>
                    </div>
                    <a [ngStyle]="{visibility: curCourse==0?'hidden':'visible'}" class="left carousel-control" role="button" href="javascript:void(0)" data-slide="prev" (click)="curCourse=curCourse-1">
                      <span aria-hidden="true" class="icon-prev"></span>
                      <span class="sr-only">Previous</span>
                    </a>
                    <a [ngStyle]="{visibility: curCourse==(itsCoursesLstDta.length-1)?'hidden':'visible'}" class="right carousel-control" role="button" href="javascript:void(0)" data-slide="next" (click)="curCourse=curCourse+1">
                      <span aria-hidden="true" class="icon-next"></span>
                      <span class="sr-only">Next</span>
                    </a>
                  </div>
                </section>

内部控制器：

jQuery(".myCrsalBook").carousel({interval: false});

那就是它正在工作。 :)

【讨论】：