This code here is the problem-
$('.slider-menu li').on('click', function(e) {
e.preventDefault();
var slide_index = $('a', this).attr('href').substr(6) - 1;
$homeSlider.flexslider(slide_index);
return false; // IE9 hack
});
In your html, you’re setting your IDs to slide
plus the attachment ID, then telling flexslider to animate to that slide. Except flexslider is expecting a slide position (1st slide, 2nd slide, etc.), not an element ID. You should instead use the index of the clicked li-
$('.slider-menu li').on('click', function(e) {
e.preventDefault();
$homeSlider.flexslider( $(this).index() );
return false; // IE9 hack
});
Also note that flexslider can do all this stuff for you automagically if you create a carousel for the thumbs, and set the carousel asNavFor
for the slider.