Javascript 多个旋转木马不'；我不想同步

我的旋转木马有个奇怪的问题。我正在使用carouFredSel为我的页面制作一个不寻常的滑块。它几乎可以工作，但有一个问题。加载页面后，旋转木马将显示第一个图像和第一个标题。但是，当旋转木马滚动到下一张图片时，它会错过第二张图片，并显示第三张图片，但带有第二张图片的标题。这个问题也出现在我的悬停效果上。当我将拇指悬停时，它会显示好的标题，但显示错误的图片

我不知道如何更好地解释这一点。如果我不清楚，请让我知道，我会尝试以不同的方式描述问题

如何将图片与标题同步

工作小提琴：

这是我的密码：

HTML:

和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;
}

我希望你们能帮忙，因为我找不到任何解决办法

$('#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;
});

.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;
}