CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
siren_dev
siren_dev

Reputation: 111

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!

Upvotes: 0

Views: 6418

Answers (2)

Kishan
Kishan

Reputation: 1190

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>

Upvotes: 1

Mr. Brown
Mr. Brown

Reputation: 336

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

I believe you are calling lightSlider but not with the correct id.

('#fade') should be ('#lightSlider').

Upvotes: 1

Related Questions