bxSlider ne fonctionne pas correctement

Question

Pour une raison quelconque, je ne peux pas faire fonctionner mon jQuery. J'ai suivi toutes les étapes et rien! Voici ce qui se passe:

Tous les styles et JavaScript:

<script src="//ajax.googleapis.com/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.com/lib/jquery.bxslider.js"></script> 
<link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" type="text/css" /> 

Et mon code 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> 

Answer 1

Vous initiez le curseur à l'aide bxslider comme class, mais dans votre cas, vous devez utiliser comme id sélecteur comme:

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

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

violon travail: http://jsfiddle.net/IrvinDominin/UV4r4/1/

Answer 2

De plus, vous voulez charger CSS d'abord, puis, les fichiers JavaScript.