Jquery slide carousel

Jquery slide carousel - HTML/CSS - Programmation

Marsh Posté le 21-03-2009 à 15:36:36    

Bonjour,
 
Je souhaite mettre en place un slide d'image automatique en tête de mon site.
 
On voit beaucoup ce genre de script et j'en ai trouvé quelques uns mais qui ne correspondent pas vraiment à ce que je veux.
 
En gros je ne souhaite pas spécialement avoir de bouton "suivant" et "précédent", seulement les images qui défilent à une vitesse réglable.
 
J'ai trouvé un script qui permet pas mal de configuration mais je n'ai pas compris comment le mettre en place.
 
Il se trouve à cette page :
 
http://thomlx.free.fr/jquery/jquery_carousel.htm
 
Si quelqu'un peut me guider dans les démarches à suivre ce serait super  :)  
 
Merci beaucoup !
 
Bon début de printemps !
 
Emmanuel

Reply

Marsh Posté le 21-03-2009 à 15:36:36   

Reply

Marsh Posté le 21-03-2009 à 17:27:33    

Tu mets un lien vers jquery en plus du lien vers ton plugin dans ta page.
Tu donnes un id au div qui contient ta liste et dans les exemples tu remplaces ("div" ) par ("#ton_id" )

Reply

Marsh Posté le 21-03-2009 à 22:29:45    

David Boring a écrit :

Tu mets un lien vers jquery en plus du lien vers ton plugin dans ta page.
Tu donnes un id au div qui contient ta liste et dans les exemples tu remplaces ("div" ) par ("#ton_id" )


 
Voila ce que j'ai fait mais ça ne marche pas...
 

Code :
  1. <html>
  2. <!-- Date de création: 20/03/2009 -->
  3. <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  5.   <title></title>
  6.   <meta name="description" content="">
  7.   <meta name="keywords" content="">
  8.   <meta name="author" content="emmanuel">
  9.   <meta name="generator" content="WebExpert 6">
  10.  
  11.   <script type="text/javascript" src="jquery.js"></script>
  12.   <script type="text/javascript" src="jquery.carousel.js"></script>
  13.  
  14.   <STYLE type="text/css">
  15. #test ul, #test li
  16. {
  17. margin:0;
  18. padding:0;
  19. list-style:none;
  20. }
  21. #test, #test li
  22. {
  23. width:500px;
  24. height:200px;
  25. overflow:hidden;
  26. }
  27. </style>
  28.  
  29. </head>
  30. <body>
  31. <SCRIPT language="Javascript">
  32. $(document).ready(function(){
  33.  $("test" ).carousel( { autoSlide: true, autoSlideInterval: 1000, loop: true } );
  34. });
  35. </SCRIPT>
  36. <div id="test">
  37. <ul>
  38.      <li><img src="images/01.jpg" border="0" width="500" height="200" alt=""></li>
  39.      <li><img src="images/02.jpg" border="0" width="500" height="200" alt=""></li>
  40.      <li><img src="images/03.jpg" border="0" width="500" height="200" alt=""></li>
  41.      ...
  42. </ul>
  43. </div>
  44. </body>
  45. </html>


 
Merci :)
 
Emmanuel

Reply

Marsh Posté le 22-03-2009 à 08:47:11    

$("#test" ).carousel
Si tu ne mets # devant test, jquery cherche le tag test et non l'id

Reply

Marsh Posté le 22-03-2009 à 13:10:31    

David Boring a écrit :

$("#test" ).carousel
Si tu ne mets # devant test, jquery cherche le tag test et non l'id


 
Ah oui exact, étourderie...
 
J'ai fais la manip mais ça ne marche toujours pas, d'après ce que j'ai pu lire sur un autre forum, ce plugin repose beaucoup sur le code css, mon erreur vient peut être de là ?
 
Si quelqu'un connait un autre plugin, simple d'installation et avec un autoslide réglable je suis preneur...
 
Merci beaucoup :)
 
Bon dimanche,
 
Emmanuel

Reply

Marsh Posté le 24-03-2009 à 11:11:13    

up :)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed