jquery - flexslider - 控制滑块外的 div

Question

我一直在使用 Flex Slider 作为我网站的滑块插件。

我不是超级精通 JQuery，但我想知道是否有人知道一种方法来绑定另一个元素（在本例中是一个元素）的内容，以允许我使用相同的导航更改 flex 滑块之外的内容。

我知道我可以将内容加载到

's 并让它滑动，但我想知道是否有一种方法可以更改滑块 div 之外的信息。下面是我的代码：

<article class="slider">
    <div class="flexslider-container">
      <div class="flexslider">
        <ul class="slides">
          <li><img class="main" src="/img/banner-boundries.jpg" /></li>
          <li><img class="main" src="/img/banner-makers.jpg" /></li>
          <li><img class="main" src="/img/banner-makers.jpg" /></li>
        </ul><!-- / slides ul -->
      </div><!-- / flexslider div -->
    </div><!-- / flexslider-container div -->
  </article><!-- / slider article -->

 <article class="slider_sub">
    <aside class="column ends">
      <p class="quote">“I was really excited to get my new CIRA X. The ability to manage which devices get priority over our 3G network has revolutionized our business.”&lt;/p>

      <hr>
      <h3>Guy Smiley</h3>
      <p class="footnote">Muppet Anchor Man, FBI Operative</p>
    </aside>
    <aside class="column ends center">
      <h2>What Do Makers Do?</h2>
      <p>Ever wish you had that Thing  that made your current devices do that one task you need?  We make that Thing.  The devices we create are based on solutions for our custmers, not just features.</p>

      <div class="moreinfo"><a href="">read more</a></div>
    </aside>
    <aside class="column ends">
      <h2>The CIRA X Story</h2>
      <img src="img/cira-x-story.png" border="0">
      <p>Read how client need drove the cration of this Feeney Wireless device.</p>
    </aside>  
    <div class="clear"></div>
  </article><!-- / featurette article -->
</section><!-- end call out section -->

所以我希望滑块导航也能滑动它下面的内容。谢谢！

Answer 1

可能有很多方法可以实现这一点。这个答案特定于 flex-slider。实现将非常具体到这个插件。这里有一些非常好的文档。

从理论上讲，有两种方法可以做到这一点。

A. 绑定第二个滑块事件，监听第一个滑块的事件。

B. 监听幻灯片事件并以编程方式调用第二个滑块上的相应事件。请注意，如果幻灯片内容不匹配 1 到 1，则可能需要转换。

A-解决方案——从文档来看，这似乎将两者绑定在一起：

<!-- Target both sliders with the same properties -->
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
</script>

//My hesitation on this is that it indicates properties are shared, I am assuming that would included shared event handlers.

B-解决方案——如果两个滑块仅共享属性而不共享事件处理程序，则手动（编程）方法可能是后备：

<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider({
      animation: "slide",
      controlsContainer: ".flex-container",
      before: function(slider) {
        //Grab second slider and pass along action
        $('#secondSliderID').flexslider.before(slider);
      }
    });
  });
</script>

滑块参数可能很复杂。两者都将涉及一些特定于插件的故障排除来确认。

希望这可以帮助。祝一切顺利！纳什