Ich benutze Flexslider. Wenn ich den Anweisungen auf der Website folge, funktioniert dies nicht für mehrere Slider. Dies ist der Code:

Ich benötige ein Navigationsgerät für beide Schieberegler. Die Anweisungen finden Sie hier:http://www.woothemes.com/flexslider/

Tut jemand was ich falsch mache?

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<link rel="stylesheet" href="http://www.esens.nl/assets/templates/esens/flexslider/flexslider.css" type="text/css" media="screen" />
<script src="http://www.esens.nl/assets/templates/esens/flexslider/jquery.flexslider-min.js"></script>

<!-- Target sliders individually with different properties -->
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('#main-slider').flexslider({
      animation: 'slide',
      controlsContainer: '.flex-container'
    });

    $('#secondary-slider').flexslider();
  });
</script>



<!-- Somewhere in the  of your page -->
<div id="main-slider" class="flexslider">
  <ul class="slides">
        <li><img src="http://i00.i.aliimg.com/img/pb/951/248/411/411248951_991.jpg" /></li>
        <li><img src="http://espn.go.com/i/eticket/20070515/photos/etick_on_08.jpg" /></li>
        <li><img src="http://www.pizzapartyweekend.com/pizza.jpg" /></li>
        <li><img src="http://espn.go.com/i/eticket/20070515/photos/etick_on_08.jpg" /></li>
  </ul>
</div>

<br><br><br>

<div id="secondary-slider" class="flexslider">
  <ul class="slides">
        <li><img src="http://images.forum-auto.com/mesimages/651885/Noir%20Fantome.png" /></li>
        <li><img src="http://www.pizzapartyweekend.com/pizza.jpg" /></li>
        <li><img src="http://espn.go.com/i/eticket/20070515/photos/etick_on_08.jpg" /></li>
        <li><img src="http://i00.i.aliimg.com/img/pb/951/248/411/411248951_991.jpg" /></li>
  </ul>
</div>