Angular2 HTML Element Karussell

Question

Kennt jemand eine gute Karussellbibliothek für angular2?

Wie https://onsen.io/v2/docs/angular2/ons-carousel-item.html aber nur das Karussell?

Answer 1

Sie könnten in Angular2-drag-scroll aussehen wollen, es Funktionen wie Ziehen mit der Maus hat zu blättern und Scrollbar usw.

Anwendungsbeispiel zu verstecken:

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

Weitere Dokumentation, dort eine Demo-Site: https://bfwg.github.io/angular2-drag-scroll/

Answer 2

Kein Grund zur Sorge, "welches Karussell sollte ich benutzen?" Geh mit jedem Karussell Du magst z.B. Bootstrap-Karussell, jQuery-Karussell, Eulenkarussell usw.

Angular2 bindet Sie nicht mit einer bestimmten Bibliothek, es aktualisiert automatisch seine Änderungen (nicht wie Angular1).

Ich wurde wie folgt verwendet wird (nur Bootstrap Karussell):

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

Innen-Controller:

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

Das ist es funktionierte. :)