title: Flexslider: how to show thumbnails of slides before clicking?
body: <p>I'm trying to replicate the effect on <a href="http://residentialbylandsecurities.com/" rel="nofollow">http://residentialbylandsecurities.com/</a> On their slider, if you hover over the arrows, it shows a thumbnail of the upcoming slide. I've installed the same slider (FlexSlider), but this is a customization. My example site is <a href="https://saifee-signs.squarespace.com/" rel="nofollow">here</a> (unfinished).</p>
  
  <p>Their script is running in <a href="http://residentialbylandsecurities.com/wp-content/themes/ls-residential/js/scripts.js" rel="nofollow">this file</a>, but that's so long and sprawling and doing so much more than I need that I want to just write my own function. </p>
  
  <p>My pseudocode:
  1. Mainpulate the next/prev controls to add div.thumbnail to each
  2. Locate the slides before and after the currently active slide, and save them in variables (prevSlide, nextSlide)
  3. Get the data-thumb attributes from these slide img elements, and save each in variables (prevThumbData and nextThumbData)
  4. Locate .next div.thumbnail and .prev div.thumbnail
  5. Apply prevThumbData and nextThumbData as CSS background-images to their respective elements.
  6. CSS: When hover over the arrow elements, slide in div.thumbnail</p>
  
  <p>I don't need to use the other site's function at all unless it's simpler, I just need to accomplish the above. I've already set up my IMG elements to have the data-thumb attribute, but haven't figured out how to modify the slider to include div.thumbnail.</p>
  
  <p>EDIT: I think I figured out the second and third steps in the procedure:</p>
  
  <p><strong>2. Locate the slides before and after the currently active slide, and save them in variables (prevSlide, nextSlide)</strong></p>
  
  <pre><code>function flexThumbs() { 
  var slider = $('.flexSlider div ul')
  var slides = new Array(slider.children());
  var images = slide.find('img'); 
  var currentSlide = $("li.flex-active-slide");
  // find next and previous slides
  var totalSlides = slider.slides.length;
      var nextSlide = slider.currentSlide + 1;
      if (nextSlide &gt;= totalSlides)
          nextSlide = 0;
      var prevSlide = slider.currentSlide - 1;
      if (prevSlide &lt; 0)
          prevSlide = totalSlides - 1;
  </code></pre>
  
  <p><strong>3. Get the data-thumb attributes from these slide img elements, and save each in variables (prevThumbData and nextThumbData)</strong></p>
  
  <pre><code>var prevThumbData = $(prevSlide &gt; "img").attr("data-thumb");
  var nextThumbData = $(nextSlide &gt; "img").attr("data-thumb");
  }
  </code></pre>