Lightslider jquery 插件中的 Javascript 无法正常工作

Question

我有一个问题。我无法获得 jQuery 插件 lightSlider在我正在处理的这个页面上工作。

我很确定我遗漏了一些明显的东西，因为我是新手。我目前也在使用 twitter bootstrap。

这是 HTML:

       <section>
    <div ckass="row">
        <div class="col-md-12">

<div class="clearfix" style="padding:20px;background-color:#f6f6f6;">
 <ul id="lightSlider" class="list-unstyled clearfix cSdemo cS-hidden" >
<li>
  <h3>First Slide</h3>
  <p>Lorem ipsum Cupidatat quis pariatur anim.</p>
</li>
<li>
  <h3>Second Slide</h3>
  <p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p>
</li>
</ul>
</div> 
  </div>
    </div>
</section>

这是JS

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/lightSlider.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$('#fade').lightSlider({
minSlide:1,
maxSlide:1,
mode:'fade'
});  
});
</script>

我检查了 Chrome 中的开发人员控制台，它“看起来”像是我正确引用了正确的 js 、 jquery 和 css 文件(我在本地驱动器上工作)

目前唯一显示的是一个灰色框。

如果我需要包含任何额外的代码/信息，请告诉我

如有任何帮助，我们将不胜感激!

Answer 1

您可以像下面这样更改您的 javascript 代码。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/lightSlider.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$('#lightSlider').lightSlider({
minSlide:1,
maxSlide:1,
mode:'fade'
});  
});
</script>