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

$('#fade').lightSlider({...

我相信你正在调用lightSlider但没有使用正确的id。

('#fade')应为('#lightSlider')。

Answer 2

您可以更改自己的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>

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

2 个答案: