For some reason, I can't make my jQuery work. I've followed every step and nothing! Here's what's happening:

All the styles and JavaScript:

<script src="//ajax.googleapis/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js">   <\/script>')</script>
<script src=".bxslider.js"></script>
<link href=".bxslider.css" rel="stylesheet" type="text/css" />

And my HTML:

<ul id="bxslider">
<li><img src="1.jpg" /></li>
<li><img src="2.jpg" /></li>
<li><img src="3.jpg" /></li>
</ul>

<script type="text/javascript">
$(document).ready(function() {
    $('.bxslider').bxSlider({
        auto: true,
        autoControls: true
    });
});
</script>

For some reason, I can't make my jQuery work. I've followed every step and nothing! Here's what's happening:

All the styles and JavaScript:

<script src="//ajax.googleapis./ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js">   <\/script>')</script>
<script src="http://bxslider./lib/jquery.bxslider.js"></script>
<link href="http://bxslider./lib/jquery.bxslider.css" rel="stylesheet" type="text/css" />

And my HTML:

<ul id="bxslider">
<li><img src="1.jpg" /></li>
<li><img src="2.jpg" /></li>
<li><img src="3.jpg" /></li>
</ul>

<script type="text/javascript">
$(document).ready(function() {
    $('.bxslider').bxSlider({
        auto: true,
        autoControls: true
    });
});
</script>

• javascript
• jquery
• html
• plugins
• bxslider

2 Answers 2

You are initiating the slider using bxslider as class, but in your case you have to use as id selector like:

$(document).ready(function () {
    $('#bxslider').bxSlider({
        auto: true,
        autoControls: true
    });
});

Selectors docs: http://api.jquery./category/selectors/

Working fiddle: http://jsfiddle/IrvinDominin/UV4r4/1/

Also, you would want to load CSS first and then, the JavaScript files.