Javascript in Lightslider jquery plugin not working -

i having problem. not able jquery plugin lightslider work in page working on.

i pretty sure missing obvious, kind of new. current using twitter bootstrap well.

here 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 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 developer console in chrome , "looks" correctly referencing proper js , jquery , css files (i working local drive)

currently thing showing gray box.

please let me know if need include additional code/information

any appreciated!

you can change javascript code 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>