Question

I have been using Flex Slider as a slider plugin for my websites.

I am not super versed in JQuery, but I was wondering if anyone knew of a way to tie the content of another element (in this case an element) to allow for me to change content outside of the flex slider with the same navigation.

I know I can load the content into the

‘s and have it slide, but I was wondering if there was a way to change information outside of the slider div. Below is my code:

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

SO I want the slider navigation to also slide the content below it. Thanks!

Answer 1

There are probably a number of ways to accomplish this. This answer is specific to flex-slider. The implementation will be very specific to this plugin. There is some pretty good documentation here.

Theoretically, there are two ways to accomplish this.

A. Bind the second slider events to listen to the events of the first slider.

B. Listen to the slide events and programatically call the corresponding events on the second slider. Note, conversion may be required if slide contents do not match 1 to 1.

A-Solution– Judging from the documentation, this appears to bind the two together:

<!-- 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– If the two sliders share only properties and not event handlers, the manual (programmatic)method is possible fallback:

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

There may be complication with the slider parameter.
Both will involve a bit of plugin specific troubleshooting to confirm.

Hope this helps.
All the best!
Nash