Flexslider: how to show thumbnails of slides before clicking?

I'm trying to replicate the effect on http://residentialbylandsecurities.com/ 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 here (unfinished).

Their script is running in this file, but that's so long and sprawling and doing so much more than I need that I want to just write my own function.

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

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.

EDIT: I think I figured out the second and third steps in the procedure:

2. Locate the slides before and after the currently active slide, and save them in variables (prevSlide, nextSlide)

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 >= totalSlides)
        nextSlide = 0;
    var prevSlide = slider.currentSlide - 1;
    if (prevSlide < 0)
        prevSlide = totalSlides - 1;

3. Get the data-thumb attributes from these slide img elements, and save each in variables (prevThumbData and nextThumbData)

var prevThumbData = $(prevSlide > "img").attr("data-thumb");
var nextThumbData = $(nextSlide > "img").attr("data-thumb");
}

Solution

It looks like the answer is in their scripts.jsfile.

First in the section where they call on .flexslider() they're passing a after: callback. Which is just one of the default callback options in flexslider.

after callback:

            after: function (slider) {
                if (!isTouch) {
                    mainSlider.setThumbs(slider);
                    flexsliderCopy.fadeIn(300); // Fade text back in
                } else {
                    //mainSlider.removeBulk(slider.currentSlide);
                }
            }

So we see they're calling a .setThumbs() method. A quick ctrl + f reveals:

            mainSlider.setThumbs = function (slider) {
                var totalSlides = slider.slides.length;
                var nextSlide = slider.currentSlide + 1;
                if (nextSlide >= totalSlides)
                    nextSlide = 0;
                var prevSlide = slider.currentSlide - 1;
                if (prevSlide < 0)
                    prevSlide = totalSlides - 1;

                prevThumb.find('div').css({
                    backgroundImage: 'url(' + slider.slides.eq(prevSlide).attr('data-thumb') + ')'
                });
                nextThumb.find('div').css({
                    backgroundImage: 'url(' + slider.slides.eq(nextSlide).attr('data-thumb') + ')'
                });

                prevThumb.animate({
                    opacity: 1
                });
                nextThumb.animate({
                    opacity: 1
                });
            };