bxSlider不初始化

问题描述：

我试图初始化jQuery bxSlider，但由于某些原因，即使添加相同的资源，如网站上显示的示例我不能初始化该插件。bxSlider不初始化

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

我在做什么错？

的jsfiddle：https://jsfiddle.net/rcymj0s0/2/

您需要正确包含脚本：https：//jsfiddle.net/rcymj0s0/5/。请参阅我使用的CDN位置左侧的“外部资源”选项卡。请注意，这两张幻灯片中的图像相同，因此没有任何内容会在此处发生变化。您可以从底部的传呼机图标看到它的作用。 –

在您的jsfiddle控制台中有jQuery错误（ReferenceError：$未定义），请检查它。 –

JSFiddle演示了我的网站html结构，并且它不适用于此设置。控制台日志'bxSlider不是函数' – user3615851

答

使用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>

答

你在/javascripts/application.js创建自己的jQuery的版本。这是之前您已经在DOM中包含jQuery并尝试添加bxSlider插件之后。要解决此问题，包括bxSlider具有以下行后的JavaScript ：

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

结果将是如下（记住做此更改之前删除原始bxSlider脚本标签）

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

bxSlider不初始化

相关推荐