同步滑块与光滑忽略特定滑动同步

Sync slider with slick ignore specific slide in syncing

本文关键字:同步      更新时间:2023-09-26

我有2同步滑块在顶部滑块我需要添加在一个特定的地方信息,这不是在底部滑块。我怎样才能保持正确的同步呢?

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

小提琴:http://jsfiddle.net/45w9k4qb/

您是否尝试过

slide: '.slide'

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

所以如果你给所有你想要的幻灯片。slide类它可能会工作吗?