Q: Javascript in Lightslider jquery plugin not working I am having a problem. I am not able to get the jQuery plugin lightSlider to work in this page I am working on. 
I am pretty sure I am missing something obvious, as I am kind of new. I am current using twitter bootstrap as well. 
here is the 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>

and here is the 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>

I checked with the developer console in Chrome and it "looks" like I am correctly referencing the proper js , jquery and css files (I am working from my local drive) 
Currently the only thing that is showing up is a gray box.
Please let me know if I need to include any additional code/information
any help would be greatly appreciated!

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

I believe you are calling lightSlider but not with the correct id.
('#fade') should be ('#lightSlider').

A: You can change your javascript code like as below.
<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>

