bxSlider initialisiert nicht

Question

Ich versuche, die jQuery bxSlider zu initialisieren, aber aus irgendeinem Grund, sogar die gleichen Ressourcen wie auf den Website-Beispielen gezeigt, kann ich das Plugin nicht initialisieren.

$(document).ready(function() { 
    $('.bxslider').bxSlider({ 
     mode: 'fade', 
     captions: true 
    }); 
}); 

Was mache ich falsch?

JSFiddle: https://jsfiddle.net/rcymj0s0/2/

Answer 1

Verwenden this cdn Pfad wird es funktionieren.

$('.bxslider').bxSlider({ 
 
    captions: true 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/vendor/jquery.easing.1.3.js"></script> 
 

 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script> 
 

 
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css"> 
 
    
 
<div id="slider-section"> 
 
    <ul class="bxslider"> 
 
    <li><img src="http://media.voog.com/0000/0039/0203/photos/icon.png" /></li> 
 
    <li><img src="http://media.voog.com/0000/0039/0203/photos/icon.png" /></li> 
 
    </ul> 
 
</div>

Answer 2

Sie in /javascripts/application.js Ihre eigene Version von jQuery zu schaffen. Dies ist der Fall, nachdem Sie jQuery bereits früher im DOM eingefügt und versucht haben, das bxSlider-Plugin hinzuzufügen. Um das Problem zu beheben, schließen die bxSlider javascript nach die Linie, die Folgendes:

<script src="/javascripts/application.js"></script> 

Das Ergebnis wird sein, die folgende (nicht vergessen, das Original bxSlider Script-Tag zu entfernen, bevor diese Änderung)

<script src="/javascripts/application.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.js"></script>