Witam wszystkich.
Mam niecodzienny problem z moim sliderem. Do obsługi używam carouFredSel aby otrzymać dość nietypowy efekt. Slider praktycznie działa, z jednym błędem. Po tym jak strona się załaduje slider pokazuje pierwszy obrazek oraz pierwszy tytuł. Jednak gdy samoczynnie przejdzie do następnego to omija drugi obrazek i pokazuje trzeci ale z drugim tytułem. Dodatkowo problem pojawia się przy efekcie hoverowania. Kiedy najadę na miniaturę pokazuje mi się poprawny tytuł oraz zły obrazek.

Nie wiem czy wszystko mi się dobrze udało wytłumaczyć. Jeżeli nie, dajcie znać a ja postaram się to lepiej opisać.

Moje pytanie brzmi: jak synchronizować obrazki?

Mam nadzieję, że pomożecie, albo ktoś jakąś literówkę wypatrzy bo ja już nie mam pomysłu co może być nie tak.

Działający fiddle: https://jsfiddle.net/78y8n4f8/2/

Poniżej mój kod:

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

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