javascript - 光滑的滑块相同的导航动作

Question

我有两个光滑的滑块运行良好。相同导航的问题：当我滑动第一张和第二张幻灯片时，第二张幻灯片将滑动 2（如 1:2），同时第一张幻灯片将滑动一个。

我已经尝试过，asNavFor但它没有使用相同的导航拆分滑块 1 和滑块 2。谁能帮我实现这一目标？解决方案将被标记为确定。

$('.slider1').slick({
		infinite: false,
    slidesToShow: 1,
    slidesToScroll: 1,
    rows: 1,
    swipeToSlide: true,
	asNavFor: '.slider2'
});
	
	$('.slider2').slick({
   dots: false,
        infinite: false,
        speed: 500,
        slidesToShow: 2,
        slidesToScroll: 2,
        arrows: true,
	asNavFor: '.slider1'
});

.slick-slide {
    background: #3a8999;
    color: white;
    padding: 40px 0;
    font-size: 30px;
    font-family: "Arial", "Helvetica";
    text-align: center;
}

.slick-prev:before,
.slick-next:before {
     color: black !important;
}

.slick-dots {
    bottom: -30px;
}

.slick-slide:nth-child(odd) {
    background: #e84a69;
}

.slick-prev {
    position: relative;
    top: 45px !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-6">
            <section class="slider slider1">
                <div>slide1</div>
                <div>slide2</div>
                <div>slide3</div>
                <div>slide4</div>
                <div>slide5</div>
                <div>slide6</div>
            </section>
        </div>
        <div class="col-sm-6 col-md-6">
            <section class="slider slider2">
                <div>slide1</div>
                <div>slide2</div>
                <div>slide3</div>
                <div>slide4</div>
                <div>slide5</div>
                <div>slide6</div>
            </section>
        </div>
    </div>
</div>

标签： javascriptjqueryhtmlcsstwitter-bootstrap