Comment mettre en place plusieurs curseurs avec flexslider?

- Je utiliser flexslider, lorsque j'ai suivi les instructions sur leur site ça ne fonctionne pas pour plusieurs curseurs, c'est le code:

j'ai besoin d'un contrôleur de nav sur les deux curseurs, les instructions sont ici:
http://www.woothemes.com/flexslider/

Quelqu'un ce que je fais mal?

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<link  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>

OriginalL'auteur Marc | 2012-07-19

  1. 8
    <!-- 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>

    OriginalL'auteur 1oldpapa

  2. 3

    Mon Live de la solution dans Jsfiddle ici 

    <!-- Target sliders individually with different properties -->
<script type="text/javascript" charset="utf-8">
/*-----------------------------------------------------------------------------------*/
/* DOC Javascript JS */
/*-----------------------------------------------------------------------------------*/
(function($, window){
/*-----------------------------------------------------------------------------------*/
    window.app = {};
    /*--------------------------------------------------------------------------------*/


    app.uiSlide =
    {
        /* Test elem and Call flexslider() */
        flexslider:     function ( elem, params ) {
                            //Test if elem exist in dom
                            if( $(elem).length > 0 ){
                                 //Call function
                                 $(elem).flexslider(params);
                            };
        },
        /* Define and init all elem */
        init:           function () {

                            //1 Define Objects Collection
                            var elem =
                            [
                                //Slider A
                                {
                                    slide: '#flexslider-a',
                                    param: {
                                        animation:          'slide',
                                        controlsContainer:  '.flex-container'
                                    } 
                                },
                                //Slider B
                                {
                                    slide: '#flexslider-b',
                                    param: {
                                        animation:          "slide",
                                        controlNav:         false,
                                        animationLoop:      true,
                                        slideshow:          false,
                                        smoothHeight:       true,
                                    } 
                                }
                                //Add Slide XYZ
                                //...
                                //...
                            ];

                            //2 Init All
                            for( var i=0; i < elem.length; i++ ){
                                this.flexslider( elem[i].slide, elem[i].param )
                            }

        }
    };




    /* init all function() */
    app.start =
       function(){
           this.uiSlide.init()
       };
   /*--------------------------------------------------------------------------------*/
    $(document).ready(function(){app.start();})
/*-----------------------------------------------------------------------------------*/
})(jQuery, window)
</script>




<!-- Somewhere in the of your page -->

<!-- SLIDER A -->
<div id="flexslider-a" 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>

<!-- SLIDER B -->
<div id="flexslider-b" 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>

    OriginalL'auteur Charles Romney

  3. 1

    Résolu par l'OP sur la question:

    Je l'ai compris, j'ai été à l'aide de quelques vieux dossiers. J'utilise flexslider,
    lorsque j'ai suivi les instructions sur leur site ça ne fonctionne pas pour
    plusieurs curseurs, c'est le code:

    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<link  href="http://www.xxx.nl/assets/templates/esens/flexslider/flexslider.css" type="text/css" media="screen" />
<script src="http://www.xxx.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>

    OriginalL'auteur