Slider jquery qui ne s'affiche pas

Résolu/Fermé
empereurlord - 21 nov. 2013 à 13:07
 empereurlord - 21 nov. 2013 à 15:08
Bonjour,

Je sollicite vos lumières car ça fait bien 4 jours que je m'arrache les cheveux de la tête avec un slider jquery (celui ci : http://bxslider.com/ , tout est expliqué et pourtant ça ne fonctionne pas).

C'est sans nul doute le "step 3" que je fais mal, mais je suis un brèle en langage orienté objet ...

Voici ce que j'obtiens :

http://matthiovache.livehost.fr/images.php

Et le code de la page :


<?php include("doctype.php"); ?>
<html lang="fr">
<head>
<title>MATTHIOVACHE - Images</title>
<meta charset="utf-8">
<link rel="stylesheet"  type="text/css" href="css/style.css">

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="js/jquery.bxslider.min.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script src="js/plugins/jquery.fitvids.js"></script>
<script src="js/plugins/jquery.easing.1.3.js"></script>

<!-- bxSlider CSS file -->
<link href="/js/jquery.bxslider.css" rel="stylesheet" />


<script type="text/javascript">
$('.bxslider').bxslider({
  mode: 'fade',
  captions: true
}); </script>

</head>
<body>

<div id="main">
<?php include("menu.php"); ?>

<div id="content">

<div style="width:100%; height:100%;">
<ul class="bxslider">    <!-- slider jquery -->
  <li><img src="image/photo-metal1.jpg" >
  </li>
    <li><img src="image/photo-metal2.jpg" >
  </li>
    <li><img src="image/toit-metal.jpg" >
  </li>
    <li><img src="image/vieux-mur1.jpg" >
  </li>
  
</ul>
</div>
</div> 
</div> <!-- FIN DIV MAIN -->
</body>
</html>



Auriez une idée de ce qui ne colle pas ? J'ai du faire une erreur quelque part. Merci d'avance pour vos réponses, Bonne journée à tous !



2 réponses

RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
21 nov. 2013 à 14:08
Salut

1
tu as oublie le $(document).ready

$(document).ready(function(){
$('.bxslider').bxSlider({
    mode: 'fade',
    captions: true
   });
  });


2

c est quoi ces ligne que tu a rajoute
$('.bxslider').bxSlider({
mode: 'fade',
captions: true
});
dans le jquery.bxslider.js et dansjquery.bxslider.min.js ?
tu ne dois rien ajouter dans ces js !!


3

soit tu met la version compresse ou l autre mais pas les 2 !!
<script src="js/jquery.bxslider.min.js"></script>
<script src="js/jquery.bxslider.js"></script>


a+
3
empereurlord
21 nov. 2013 à 15:08
Ca marche ! Génial, merci beaucoup !
0