How to set up multiple sliders with flexslider?

Marc picture Marc · Jul 19, 2012 · Viewed 25k times · Source

I use flexslider, when i follow instructions on their website it doesn't work for multiple sliders, this is the code:

i need a controler nav on both sliders, instructions are here: http://www.woothemes.com/flexslider/

Does anyone what i'm doing wrong?

<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>

Answer

1oldpapa picture 1oldpapa · Jan 30, 2013
<!-- 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({
      animation: 'slide',
      controlsContainer: '.flex-container'
    });
</script>