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

我遇到问题。我无法让jQuery插件lightSlider在我正在处理的这个页面中工作。Javascript中的Lightslider jquery插件无法正常工作

我很确定我错过了一些明显的东西，因为我有点新。我目前也使用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文件（我正在从我的本地驱动器工作）

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

请让我知道如果我需要包括任何额外的代码/信息

任何帮助，将不胜感激！

来源

2014-09-23 siren_dev

您尝试在'$（“＃fade”）'上实现lightSlider，但**在您提供的代码中没有ID为fade **的元素。从你给我们的HTML代码，我会说'$（“＃lightSlider”）。lightSlider（）;' – pistou 2014-09-23 12:40:02

谢谢！这结束了完美的工作。 – 2014-09-23 12:57:44

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

来源

2014-09-23 12:49:55 Kishan

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

我相信你打电话给lightSlider，但没有正确的ID。

('#fade')应该是('#lightSlider')。

来源

2014-09-23 12:42:12

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

回答

相关问题