Flex Slider, when synced skips 2nd thumbnail - apache-flex

Question

I'm using 2 FlexSlider2's synced so one acts as a thumbnail carousel nav for the main slider. I have slideshow set to true on the main slide show and false on the slider synced as navigation. Everything works smoothly, except that FlexSldier2 doesn't add an active class to the 2nd slide in the thumbnav, it just skips right voer it. The large main image transitions fine however. I've searched all voer and this is the only thing related, however there is no answer there either: https://github.com/woothemes/FlexSlider/issues/331.
Below is my code, the JS and the HTML. Please let me know if anyone else has ever experienced this as I am at a loss.
<script>
$(window).load(function() {
// The slider being synced must be initialized first
$('#thumbslide').flexslider({
animation: "slide",
controlNav: false,
directionNav: true,
animationLoop: true,
slideshow: false,
itemWidth: 250,
itemMargin: 15,
asNavFor: '#mainslide',
});
$('#mainslide').flexslider({
animation: "fade",
controlNav: false,
directionNav: true,
animationLoop: true,
slideshow: true,
initDelay: 50,
slideshowSpeed: 6000, //Integer: Set the speed of the slideshow cycling, in milliseconds
animationSpeed: 600,
sync: "#thumbslide"
});
});
<div class="slidewrap">
<div id="mainslide" class="flexslider">
<ul class="slides">
<li> <img src="/images/slide1.png" /> </li>
<li> <img src="/images/slide2.png" /> </li>
<li> <img src="/images/slide3.png" /> </li>
<li> <img src="/images/slide4.png" /> </li>
<li> <img src="/images/slide5.png" /> </li>
<li> <img src="/images/slide6.png" /> </li>
</ul>
</div>
<div id="thumbslide" class="flexslider">
<ul class="slides">
<li> <img src="/images/thumb1.jpg" /> <img src="/images/red.png" class="redpic" /> </li>
<li> <img src="/images/thumb2.jpg" /> <img src="/images/red.png" class="redpic" /> </li>
<li> <img src="/images/thumb3.jpg" /> <img src="/images/red.png" class="redpic" /> </li>
<li> <img src="/images/thumb4.jpg" /> <img src="/images/red.png" class="redpic" /> </li>
<li> <img src="/images/thumb5.jpg" /> <img src="/images/red.png" class="redpic" /> </li>
<li class="last"> <img src="/images/thumb6.jpg" /> <img src="/images/red.png" class="redpic" /> </li>
</ul>
</div>

Answer 1

I think that's because of itemWidth and itemMargin. If you replace "itemWidth: 250," with "itemWidth: 265," (265 = 250 + 15(which is the itemMargin)), the problem should be solved. It worked for me.

Answer 2

This is an issue with Flexslider itself.
In the "canAdvance" function [line 797 of Flexslider version 2.2.0], just change slider.pageCount to slider.count