Question

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

我不是很熟悉JQuery，但我想知道是否有人知道如何将另一个元素的内容（在这种情况下是一个元素）绑定在一起，以允许我用相同的元素更改flex滑块之外的内容导航

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

中并让它滑动，但我想知道是否有办法在滑块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 -->

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

Answer 1

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

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

一个。绑定第二个滑块事件以侦听第一个滑块的事件。

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

A-Solution--从文档来看，这似乎将两者结合在一起：

<!-- 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-Solution--如果两个滑块只共享属性而不共享事件处理程序，则可以使用手动（编程）方法回退：

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

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

希望这会有所帮助。祝一切顺利！纳什

flexslider - 控制滑块外的div

1 个答案: