如何使用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

解决了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> 

Answer 3

我的直播解决方案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>