Warum funktioniert dieser Schieberegler?

Question

Ich habe dieses Beispiel:

link

$(document).ready(function() { 
 
    $('.carousel').carousel({ 
 
    interval: 7000 
 
    }); 
 
});

.carousel { 
 
    z-index: -99; 
 
} 
 
/* keeps this behind all content */ 
 

 
.carousel .item { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 100%; 
 
    -webkit-transition: opacity 1s; 
 
    -moz-transition: opacity 1s; 
 
    -ms-transition: opacity 1s; 
 
    -o-transition: opacity 1s; 
 
    transition: opacity 1s; 
 
} 
 
.carousel .one { 
 
    background: url(assets/img/slide3blur.jpg); 
 
    background-size: cover; 
 
    -moz-background-size: cover; 
 
} 
 
.carousel .two { 
 
    background: url(assets/img/slide2blur.jpg); 
 
    background-size: cover; 
 
    -moz-background-size: cover; 
 
} 
 
.carousel .three { 
 
    background: url(assets/img/slide1blur.jpg); 
 
    background-size: cover; 
 
    -moz-background-size: cover; 
 
} 
 
.carousel .active.left { 
 
    left: 0; 
 
    opacity: 0; 
 
    z-index: 2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="myCarousel" class="carousel container slide"> 
 
    <div class="carousel-inner"> 
 
    <div class="active item one"></div> 
 
    <div class="item two"></div> 
 
    <div class="item three"></div> 
 
    </div> 
 
</div>

Leider ist dieses Karussell funktioniert nicht. Ich erhalte diesen Fehler

Uncaught TypeError: $(...).carousel is not a function 

Sie können mir helfen, diesen Fehler bitte zu beheben? Vielen Dank im Voraus

Answer 1

Sie müssen jquery.js vor bootstrap.js setzen

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js 

sollte kommen vor:

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js 

nur auf die Einstellung klicken (von links nach JS):

und dann die Reihenfolge der ‚enthält‘:

Bitte beachten Sie, dass Sie die JPG-Dateien als auch proive sollen, aber das carusel Problem gelöst wurde.

Answer 2

Sie sind nicht enthalten Karussell-Plugin. Bitte fügen Sie diese Zeile in Ihrem Kopf-Tag

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

das sind drei Linien für Bootstrap-Karussell es richtig ausgeführt wird.