How to set up multiple sliders with flexslider?

问题

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>

回答1:

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

回答2:

My Live solution in Jsfiddle here

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

回答3:

Solved by OP on question:

I have it figured out, i was using some old files. I use flexslider, when i follow instructions on their website it doesn't work for multiple sliders, this is the code:

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

来源：https://stackoverflow.com/questions/11559209/how-to-set-up-multiple-sliders-with-flexslider