Inserer deux slide "FlexSlider" dans un meme page

Bonjour,
J'ai besoin de creer une page web avec deux slides, un slideshow et un carousel, je suis obligé de passer par flexslider, qui est polyvalent.
Voici mon code, le premier slide marche mais pas le carousel :
mon head :

	
<link rel="stylesheet" href="../flexslider.css" type="text/css" media="screen" />
<script src="js/modernizr.js"></script>

        
<div class="flexslider">
          <ul class="slides">
            <li>
  	    	    <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
  	    		</li>
  	    		<li>
  	    	    <img src="images/kitchen_adventurer_lemon.jpg" />
  	    		</li>
          </ul>
        </div>

        <div class="carousel">
          <ul class="slides">
                      <li>
  	    	    <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
  	    		</li>
  	    		<li>
  	    	    <img src="images/kitchen_adventurer_lemon.jpg" />
  	    		</li>
          </ul>
        </div>

et mes jquery :

  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>
  
  <script src="../jquery.flexslider.js"></script>
   <script type="text/javascript">
    $(window).load(function(){
      $('.flexslider').flexslider({
        animation: "slide",
      });
    });
  </script>	
   <script type="text/javascript">
    $(window).load(function(){
      $('.carousel').flexslider({
        animation: "slide",
        animationLoop: true,
        itemWidth: 210,
        itemMargin: 5,
        minItems: 2,
        maxItems: 4,
      });
    });
  </script>	

Merci d'avance
Modifié par joxs (29 Oct 2012 - 18:29)

Iop,

Normal qu'il n'y a que le premier qui marche vu qu'il n'y a que sur cet élément que tu appliques ton objet flexslider.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>
  
  <script src="../jquery.flexslider.js"></script>
   <script type="text/javascript">
    $(window).load(function(){
      $('.flexslider,[b] .carousel[/b]').flexslider({
        animation: "slide",
      });
    });
  </script>	
   <script type="text/javascript">
    $(window).load(function(){
      $('.carousel,[b] .carousel[/b]').flexslider({
        animation: "slide",
        animationLoop: true,
        itemWidth: 210,
        itemMargin: 5,
        minItems: 2,
        maxItems: 4,
      });
    });
  </script>

En espérant t'avoir fourni une piste.

PS : il manque des alt sur tes images ^^

Bonjour,

L'exemple est tout de même en ligne sur le site dédié, non ?
La doc est plutôt bien fournie, non ?

Absolument, merci a vous deux