我的旋转木马问题很奇怪。我正在使用carouFredSel为我的页面制作一个不寻常的滑块。它几乎可以工作，但有一个问题。页面加载后，轮播显示第一个图像和第一个标题。但是当旋转木马滚动到下一张图片时，它会错过第二张图片并显示第三张图片，但会显示第二张图片的标题。我的悬停效果也出现了这个问题。当我悬停拇指时，它显示出好的标题但错误的图片。
我不知道如何更好地解释这一点。如果我不清楚，请告诉我，我会尝试以不同的方式描述问题。
如何将图片与图片同步？
工作小提琴：jsfiddle
这是我的代码：
HTML：
<div class="news-mp-container">
<div class="news-mp-slider" id="newsMPSlider">
<div class="images-wrapper">
<div class="news-mp-slider-bigone">
<div id="sliderBigPhotoWrapper">
<a href="#" id="sliderArticlePhoto_101">
<img src="http://magsite.pl/jsfiddleimg/articles/1426085277646_480x360.jpg"/>
</a>
<a href="#" id="sliderArticlePhoto_99">
<img src="http://magsite.pl/jsfiddleimg/articles/1426085055263_480x360.png"/>
</a>
<a href="#" id="sliderArticlePhoto_98">
<img src="http://magsite.pl/jsfiddleimg/articles/142479021075_480x360.jpg"/>
</a>
<a href="#" id="sliderArticlePhoto_97">
<img src="http://magsite.pl/jsfiddleimg/articles/1424790022510_480x360.jpg"/>
</a>
<a href="#" id="sliderArticlePhoto_96">
<img src="http://magsite.pl/jsfiddleimg/articles/1424789916934_480x360.jpg"/>
</a>
<a href="#" id="sliderArticlePhoto_95">
<img src="http://magsite.pl/jsfiddleimg/articles/1424789591806_480x360.png"/>
</a>
</div>
</div>
<div class="news-mp-slider-thumbs">
<div id="sliderThumbsWrapper">
<a href="news,single?id=101" id="sliderArticleThumb_101">
<img src="http://magsite.pl/jsfiddleimg/articles/1426085277646_62x62.jpg"/>
</a>
<a href="#" id="sliderArticleThumb_99">
<img src="http://magsite.pl/jsfiddleimg/articles/1426085055263_62x62.png"/>
</a>
<a href="#" id="sliderArticleThumb_98">
<img src="http://magsite.pl/jsfiddleimg/articles/142479021075_62x62.jpg"/>
</a>
<a href="#" id="sliderArticleThumb_97">
<img src="http://magsite.pl/jsfiddleimg/articles/1424790022510_62x62.jpg"/>
</a>
<a href="#" id="sliderArticleThumb_96">
<img src="http://magsite.pl/jsfiddleimg/articles/1424789916934_62x62.jpg"/>
</a>
<a href="#" id="sliderArticleThumb_95">
<img src="http://magsite.pl/jsfiddleimg/articles/1424789591806_62x62.png"/>
</a>
</div>
</div>
</div>
<div class="news-mp-slider-title-holder">
<div id="sliderTextWrapper">
<div id="sliderArticleTitle_101" class="news-mp-slider-text">
<a href="#" class="news-mp-title">
<h4>Bacon ipsum</h4>
</a>
<p class="news-mp-shortdesc">Bacon ipsum dolor amet kevin short ribs ham, tenderloin picanha biltong rump ribeye tail leberkas.</p>
</div>
<div id="sliderArticleTitle_99" class="news-mp-slider-text">
<a href="#" class="news-mp-title">
<h4>Lorem ipsum</h4>
</a>
<p class="news-mp-shortdesc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacus velit,...</p>
</div>
<div id="sliderArticleTitle_98" class="news-mp-slider-text">
<a href="#" class="news-mp-title">
<h4>Veggie ipsum</h4>
</a>
<p class="news-mp-shortdesc">Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion...</p>
</div>
<div id="sliderArticleTitle_97" class="news-mp-slider-text">
<a href="#" class="news-mp-title">
<h4>Tuna ipsum</h4>
</a>
<p class="news-mp-shortdesc">Snook peamouth crocodile shark collared dogfish weever trout cod slender mola Modoc </p>
</div>
<div id="sliderArticleTitle_96" class="news-mp-slider-text">
<a href="#" class="news-mp-title">
<h4>Yippiyo ipsum</h4>
</a>
<p class="news-mp-shortdesc">Yippiyo ipsizzle i'm in the shizzle sizzle amizzle, consectetuer adipiscing...</p>
</div>
<div id="sliderArticleTitle_95" class="news-mp-slider-text">
<a href="#" class="news-mp-title">
<h4>Beer ipsum</h4>
</a>
<p class="news-mp-shortdesc">degrees plato krausen, mash ipa bacterial pint glass. krug cask conditioned...</p>
</div>
</div>
</div>
</div>
</div>
JS：
$('#sliderBigPhotoWrapper').carouFredSel({
responsive: false,
circular: false,
auto: {
fx: 'crossfade',
duration: 500,
timeoutDuration: 6000,
pauseOnHover: true
},
scroll: {
fx: 'crossfade',
duration: 500,
pauseOnHover: true
},
items: {
visible: 1,
width: '460px',
height: '360px'
}
});
$('#sliderTextWrapper').carouFredSel({
responsive: false,
circular: false,
synchronise: ['#sliderBigPhotoWrapper', true, true],
auto: {
fx: 'crossfade',
duration: 500,
timeoutDuration: 6000,
},
scroll: {
fx: 'crossfade',
duration: 500,
},
items: {
visible: 1,
width: '460px',
height: 'auto'
}
});
$('#sliderThumbsWrapper').on('mouseenter', 'a', function () {
console.log('hover start');
n = $(this).attr('id').split('_').pop();
console.log('n: ' + n);
console.log('before first trigger - #sliderArticlePhoto_' + n);
$('#sliderBigPhotoWrapper').trigger('slideTo', '#sliderArticlePhoto_' + n);
console.log('after first trigger');
console.log('before second trigger - #sliderArticleTitle_' + n);
$('#sliderTextWrapper').trigger('slideTo', '#sliderArticleTitle_' + n);
console.log('after second trigger');
$('#sliderBigPhotoWrapper').trigger('stop');
console.log('hover end');
return false;
});
和CSS：
.news-mp-container {
position: relative;
width: 480px;
}
.news-mp-container * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.news-mp-container img {
max-width: 100%;
height: auto;
}
/*SLIDER*/
.news-mp-slider {
margin: 0 0 20px;
}
.news-mp-slider img {
width: 100%;
}
.news-mp-slider .news-mp-title {
display: inline-block;
height: auto;
font-size: 22px;
font-size: 2.2rem;
margin: 0;
}
.news-mp-slider .news-mp-title h4{
margin: 0.5em 0;
}
.news-mp-slider .news-mp-shortdesc {
height: auto;
margin-top: 5px;
}
.news-mp-slider-bigone {
height: 360px;
overflow: hidden;
}
.news-mp-slider-bigone a, .news-mp-slider-bigone img {
display: block;
float: left;
width: 480px;
}
.news-mp-slider-bigone img {
width: 100%;
}
.news-mp-slider-thumbs {
position: absolute;
width: 100%;
background: rgba(0, 0, 0, 0.6);
bottom: 0;
padding: 10px;
z-index: 20;
}
.news-mp-slider-thumbs a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
display: block;
float: left;
margin-right: 14px;
width: 65px;
/* width: calc(100% / 6 - 10px);*/
height: 65px;
overflow: hidden;
border: 3px solid #0282cd;
}
.news-mp-slider-thumbs a:hover {
border-color: #f7be0d;
}
.news-mp-slider-thumbs a:last-child {
margin: 0;
}
.news-mp-slider-thumbs img {
display: block;
/*float: left;*/
width: 62px;
height: 62px;
}
.news-mp-slider-title-holder {
border-bottom: 1px solid #d8d8d8;
padding: 10px 0 5px;
}
.news-mp-slider-text {
width: 460px;
}
我希望你们能提供帮助，因为我找不到任何解决方案。