如何使用 flexslider 设置多个滑块？

Question

我使用 flexslider，当我按照他们网站上的说明操作时，它不适用于多个滑块，这是代码：

我需要两个滑块上的控制器导航，说明在这里： http://www.woothemes.com/flexslider/

谁知道我做错了什么？

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

Answer 2

Jsfiddle here中的我的 Live 解决方案

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

Answer 3

由 OP 解决的问题：

我知道了，我正在使用一些旧文件。我使用flexslider， 当我按照他们网站上的说明进行操作时，它不起作用 多个滑块，代码如下：

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