2016-10-17 5 views
-2

Ich habe einen Bootstrap-Schieberegler, der nicht gleitet und nicht einmal reagiert, wenn ich auf die Steuerelemente klicke. Ich kann das erste Bild sehen, aber egal wo ich klicke, ich kann nicht auf die anderen Bilder zugreifen. Funktioniert dieses Skript unten für Sie?Warum reagiert dieses Bootstrap-Skript nicht/funktioniert?

<head> 
<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script> 
<script src="js/jquery.js"></script> 
<script src="js/jquery-migrate-1.1.1.js"></script> 
<script src="js/script.js"></script> 

    </head> 


<body> 
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
    <div class="item active"> 
     <img src="http://placehold.it/450x350" alt="Slide 1"> 
     <div class="carousel-caption"> 
     Caption Slide 1 
     </div> 
    </div> 
    <div class="item"> 
     <img src="http://placehold.it/450x350" alt="Slide 2"> 
     <div class="carousel-caption"> 
     Caption Slide 2 
     </div> 
    </div> 
    <div class="item"> 
     <img src="http://placehold.it/450x350" alt="Slide 3"> 
     <div class="carousel-caption"> 
     Caption Slide 3 
     </div> 
    </div>   
    </div> 

    <!-- Controls --> 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
    </a> 
</div> 
</body> 
+1

Welche Fehler erhalten Sie in der Browser-Konsole? Und muss jQuery nicht vor dem Bootstrap enthalten sein? – j08691

+2

Setzen Sie jquery oben und unten fügen Sie den Bootstrap js –

+0

@ KinshukLahiri: Einfach so. Danke, es funktioniert. –

Antwort

1

Im Detail:

Bootstrap ist eine js-Datei, die einige Jquery Ereignisse mit ihm verbunden hat. Und wenn Sie das jquery-Skript darunter platzieren, werden die Ereignisse nicht angehängt. Daher müssen Sie jQuery immer oben hinzufügen, um die Ereignisse anzuhängen.

Ich hoffe, diese Erklärung hilft :)

Verwandte Themen