javascript - 与 slick 同步 slider 忽略同步中的特定幻灯片

Question

我在顶部 slider 中有 2 个同步 slider ，我需要在底部 slider 中没有的特定位置添加信息。我怎样才能正确地保持同步？

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

您是否尝试过该选项

slide: '.slide'

如图所示: https://codepen.io/quarkus/pen/JKPgza

那么如果你给所有你想要可见的幻灯片类.slide它可能会工作？