bxSliderは初期化されません

Question

jQuery bxSliderを初期化しようとしていますが、何らかの理由で、Webサイトの例に示したものと同じリソースを追加しても、プラグインを初期化できません。

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

私は間違っていますか？

JSFiddle：それは動作しますhttps://jsfiddle.net/rcymj0s0/2/

Answer 1

使用this cdnパス。

$('.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

あなたは/javascripts/application.jsでのjQueryの独自のビルドを作成しています。これは、既にDOMにjQueryを組み込み、bxSliderプラグインを追加しようとした後です。

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

結果が

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

（この変更を行う前に、元bxSliderスクリプトタグを削除することを忘れないでください）、次のことになります。この問題を解決するには、以下を持っているのjavascript 後の行bxSliderが含まれます