2017-08-22 3 views
0

Ich habe ein Karussell in einer meiner Komponenten. Ich habe Bootstrap richtig importiert (getestet mit Bootstrap-Taste). Das aktive Bild ist zusammen mit den Slider-Symbolen und den Navigationssymbolen am unteren Rand vorhanden.Implementieren Karussell (Angular 4)

Die Bilder werden nicht verschoben, und durch Klicken auf die Slider-Symbole oder die Navigationsschaltflächen wird zum Ende der Seite gesprungen.

Hier ist der Code.

<div class="col-sm-4" style="text-align: center"> 
    <script> 
     $('.carousel').carousel({ 
      interval: 4000 
     }); 
    </script> 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
     <!-- Indicators --> 
     <ol class="carousel-indicators"> 
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
      <li data-target="#myCarousel" data-slide-to="1"></li> 
     </ol> 

     <!-- Wrapper for slides --> 
     <div class="carousel-inner"> 
      <div class="item active"> 
       <img src="assets/img/icons/asu.jpg" alt="Los Angeles" style="width:100%;"> 
      </div> 

      <div class="item"> 
       <img src="assets/img/icons/rm.jpg" alt="Chicago" style="width:100%;"> 
      </div> 
     </div> 

     <!-- Left and right controls --> 
     <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left"></span> 
      <span class="sr-only">Previous</span> 
     </a> 
     <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right"></span> 
      <span class="sr-only">Next</span> 
     </a> 
    </div> 
</div> 

Irgendeine Idee, wo ich falsch gelaufen bin?

+0

Wenn Sie dann warum verwenden angular4 zwicken können Sie mit JQuery –

+0

das Problem der Wenn Sie das Skript verwenden möchten, müssen Sie dies in Ihrer Komponente in 'ngAfterViewInit' durchführen, aber der beste Weg ist, mit angbootstrap oder etwas eckiger zu arbeiten. –

+0

Sie können Karussell implementieren, ohne jQuery zu verwenden – Kuncevic

Antwort

0

Sie einen Blick @this plunker nehmen können, die native Angular Methoden verwendet ein Karussell und das Beste, was zu machen ist, Sie es nach Ihren Wünschen

Verwandte Themen