Code funktioniert nicht in JSFiddle

Mein Code scheint nicht in Jfiddle zu funktionieren. Wenn ich auf das Steuerelement links oder das Steuerelement rechts klicke, passiert nichts. Ich habe die externen Skripte (bootstrap und jQuery) und das Stylesheet (bootstrap) zu den externen Ressourcen hinzugefügt. Muss ich die Skripte auch im HTML-Editor referenzieren? fiddle Code funktioniert nicht in JSFiddle

HTML

<div class="carousel fade" id="carousel"> 
    <ol class="carousel-indicators"> 
     <li class="active" data-slide-to="0" data-target="#carousel"></li> 
     <li data-slide-to="1" data-target="#carousel"></li> 
     <li data-slide-to="2" data-target="#carousel"></li> 
    </ol> 
    <div class="carousel-inner"> 
     <div class="active item"> 
       <div class="container"> 
        <h3>Header 1</h3> 
        <h1 class="col-md-9">Some text </h1> 
       </div><img class="main-image" src="data:image/jpeg;base64,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"> 
     </div> 
     <div class="item"> 
       <div class="container"> 
        <h3>Header 2</h3> 
        <h1 class="col-md-9">Some text </h1> <a class="q-arrow-link text-white various fancybox.iframe" href="https://www.youtube.com/embed/JeZQ7f58TsM?autoplay=1"> watch video 1 </a> 
       </div><img class="main-image" src="data:image/jpeg;base64,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"> 
     </div> 
     <div class="item"> 
       <div class="container"> 
        <h3>Header 3</h3> 
        <h1 class="col-md-9">Some text </h1> <a class="q-arrow-link text-white various fancybox.iframe" href="https://www.youtube.com/embed/-NSvbGxzpKk?autoplay=1"> watch video 2 </a> 
       </div><img class="main-image" src="data:image/jpeg;base64,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"> 
     </div> 
     </div> 
    </div><a class="carousel-control left" data-slide="prev" href="#carousel"></a> <a class="carousel-control right" data-slide="next" href="#carousel"></a>

CSS

.carousel.fade { 
    opacity: 5; 
} 
.carousel.fade .item { 
    transition: opacity ease-in 1s; 
    left: 0; 
    opacity: 0; /* hide all slides */ 
    top: 0; 
    position: absolute; 
    width: 100%; 
    display: block; 
} 

.carousel.fade .item h3.text-white.title { 
    transition: opacity ease-in 3s 
    } 


.carousel.fade .item:first-child { 
    top: auto; 
    opacity: 0; /* show first slide */ 
    position: relative; 

} 

.carousel.fade .item.active { 
    opacity: 1; 

}

Quelle

2016-05-16 Martin

Können Sie auf die jsFiddle zeigen, wo es nicht funktioniert. Dies würde uns helfen, Ihre Konfiguration zu sehen. – Dale

Sie müssen Jquery vor dem Bootstrap aufrufen –

Sie laden Bootstrap vor jquery. –

In Ihrem Fall ist die bootstrap.min.js vor jquery enthalten, die es abhängig ist. Wenn Sie die Reihenfolge ändern, so dass jquery zuerst geht, funktioniert alles gut: http://jsfiddle.net/d55t7hfa/

Quelle

2016-05-16 13:47:11

Bootstrap ist Javascript erfordert jQuery geladen werden. Sie haben es vor dem jQuery-Skript, so dass es einen Fehler auslöst (den Sie in der Konsole sehen können) - "Fehler: Bootstrap-JavaScript benötigt jQuery". Wechseln Sie die Orte dieser Skripte (1. jQuery, 2. Bootstrap.js) und Sie werden in Ordnung sein

Quelle

2016-05-16 13:44:56

Code funktioniert nicht in JSFiddle

Antwort

Verwandte Themen