Sync slider with slick ignore specific slide in syncing

Question

I have 2 sync slider in the top slider I need to add at a specific place informations which is not in the bottom slider. How could I still keep this in sync correctly?

HTML:

<div class="example example1">
    <div class="slider slider-for">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>
        Only exist here
        </div>
        <div>4</div>
    </div>
    <div class="slider slider-nav">
        <div><p>1</p></div>
        <div><p>2</p></div>
        <div><p>3</p></div>
        <div><p>4</p></div>
    </div>
</div>

Javascript:

jQuery('.example1 .slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    fade: false,
    asNavFor: '.example1 .slider-nav',
    dots: false,
    arrows:true,    
    appendArrows: '.pr_images',
    prevArrow:'<i class="fa fa-angle-left slick-prev"></i>',
    nextArrow:'<i class="fa fa-angle-right slick-next"></i>'
});

jQuery('.example1 .slider-nav').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.example1 .slider-for',
    dots: false,
    arrows:false,
    centerMode: false,
    focusOnSelect: true
});

Fiddle: http://jsfiddle.net/45w9k4qb/

Answer 1

Have you tried the option

slide: '.slide'

As shown here: https://codepen.io/quarkus/pen/JKPgza

So If you give all the slide you want visible the class .slide it might work?