Fonction non reconnue sur un slider jQuery par MrChampy - page 1

Hello !

Alors voila, je suis intégrateur (niveau padawan) et j'ai décidé récemment de me refaire un petit site à moi, en dur, histoire de me remettre dedans.

Sur ce site, j'ai décidé de mettre un slider jQuery (bxslider, pour ceux qui connaissent), je suis donc les instructions présentes sur le site, mais j'ai un code d'erreur dans la console de Firebug, et il ne fonctionne pas ...

Voici mon code :

<!DOCTYPE html>

<!------------ HEAD ------------->

<html dir="ltr" lang="fr-FR">
<head>

<meta charset="UTF-8" />
<link rel="stylesheet"  href="css/reset.css">
<link rel="stylesheet"  href="css/style.css">
<link href="slider/lib/jquery.bxslider.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="particles.js"></script>
    
</head>
    
<!------------ BODY ------------>
    
<body>

<!--MAIN-->
    
<div id="particles-js">
<div id="f1_container">
    <div id="trigger">
<div id="f1_card" class="shadow">
  <div id="logo" class="front face"><img src="images/logo01.png"/></div>
  <div class="back face center">
    <a href="#" class="button_enter">ENTRER</a>
  </div>
</div>
</div>
</div>

</div>
    
<ul class="bxslider">
  <li><img src="http://lorempixel.com/400/200" /></li>
  <li><img src="http://lorempixel.com/400/200" /></li>
  <li><img src="http://lorempixel.com/400/200" /></li>
  <li><img src="http://lorempixel.com/400/200" /></li>
</ul>
    
<!------------- SCRIPTS ------------->
<script src="particles.js"></script>
<script src="js/app.js"></script>
<script src="slider/js/jquery.bxslider.min.js"></script>

<script>
$(document).ready(function(){
    $(".button_enter").click(function(){
        $("#f1_container").addClass("fade_enter");
    });
});
    
$(document).ready(function(){
  $('.bxslider').bxSlider();
});    
</script>

</body>
</html>

Le message d'erreur de Firebug est le suivant :

TypeError: $(...).bxSlider is not a function

	$('.bxslider').bxSlider();

Le lien vers Bxslider, si ça peut aider : http://bxslider.com/

Des idées ?

Merci !

-
Edité par MrChampy 1 octobre 2016 à 13:57:52

MrChampy

30 septembre 2016 à 14:10:17

	$('.bxslider').bxSlider();

bryan33000

30 septembre 2016 à 14:42:30

Salut,

Pas d'erreur 404 sur tes bibliothèques chargées, tu es sûr d'être ok à ce niveau là ?

Aussi, tu utilises deux balises <script> pour mettre deux $(document).ready() c'est inutile, une seule déclaration suffit

Ta feuille CSS de bxslider devrait être chargée dans la balise <head> (ca ne résoudra pas le bug, mais ici ce n'est pas sa place )

Quand tu ne sais pas, Google reste ton meilleur ami ! ;)

1 octobre 2016 à 13:58:48

J'ai corrigé (et édité le code en début de topic).

Et nope, pas d'autres erreurs à signaler apparemment ...

26 octobre 2016 à 10:41:54

Bon, toujours pas d'avancement à ce niveau, et de plus j'ai opté pour une autre solution, je reviendrai sur ce problème plus tard ...

Fonction non reconnue sur un slider jQuery

Fonction non reconnue sur un slider jQuery

Supprimer

Modérer

Signaler le message aux modérateurs