jquery - flexslider - 控制 slider 外部的 div

Question

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

我不太精通 JQuery，但我想知道是否有人知道一种方法来绑定(bind)另一个元素(在本例中是一个元素)的内容，以允许我使用相同的内容更改 Flex slider 之外的内容导航。

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

中并使其滑动，但我想知道是否有办法更改 slider 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.”</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 -->

所以我希望 slider 导航也能滑动其下方的内容。谢谢!

Answer 1

可能有多种方法可以实现这一点。这个答案是针对 Flex-Slider 的。该插件的实现将非常具体。有一些非常好的文档 here .

理论上，有两种方法可以实现这一点。

A.绑定(bind)第二个 slider 事件来监听第一个 slider 的事件。

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

A-解决方案 - 从文档来看，这似乎将两者绑定(bind)在一起:

<!-- 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-解决方案 - 如果两个 slider 仅共享属性而不共享事件处理程序，则可以使用手动(编程)方法作为后备:

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

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

希望这有帮助。一切顺利!纳什