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?
Wenn Sie dann warum verwenden angular4 zwicken können Sie mit JQuery –
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. –
Sie können Karussell implementieren, ohne jQuery zu verwenden – Kuncevic