bxslider のサムネイルと本体画像とのズレ

Question

スライダープラグイン bxslider を使用して１５枚のスライダーを作成しました。
pagerCustom: '.bx-pager'
でサムネイルを2個設定させていますが、スライド1とサムネA1はきちんと合うのですが、サムネBがどこかのタイミングでずれてしまいます。
いろいろやってみたのですが、行き詰まってしまいました。アドバイスいただければと存じます！
ぜひよろしくお願いします。

<例>

<ul class="slide"> <li>スライド1</li> <li>スライド2</li> <li>スライド3</li> </ul> <div class="bx-pager thumA"> <a data-slide-index="0" href="">サムネA1</a> <a data-slide-index="1" href="">サムネA2</a> <a data-slide-index="2" href="">サムネA3</a> </div> <div class="bx-pager thumB"> <a data-slide-index="0" href="">サムネB1</a> <a data-slide-index="1" href="">サムネB2</a> <a data-slide-index="2" href="">サムネB3</a> </div>

var slider = $('.slide').bxSlider({
auto: true,
pause: 6000,
pager: true,
mode: 'fade',
onSlideAfter: function(){
slider.startAuto();
},
pagerCustom: '.bx-pager'

});

Answer 1

「例」のコードで試してみました
A1 があって B が合わないということではなく A B かかわらずに時々押したのと画像があいませんでした

自動で切り替わるのをやめると起きなくなったので 自動で切り替わるのとクリックが被った時に自動で切り替わるのが優先されてしまい クリックしたものになってないのだと思います

     onSlideAfter: function(){
         slider.stopAuto()
         slider.startAuto(); 
     }, 

として クリックした後に一度自動切り替えをストップして再度スタートするとほぼ発生しなくなりました
ストップしなければ連続で画像を切り替えているといつか発生しますが ストップすると次の6秒後のタイミングでクリックしないといけないのであまり発生しないのだと思います
ただ これでもフェード中にクリックすると反応せず自動切り替えが優先されています

軽く試しただけなので ここまでしかわかりませんでした