光滑的滑块停止响应单击事件和索引中断

Question

我有2个滑杆，它们相互之间可作为导航。两个滑块均正常运行，直到底部滑块到达“ .slick-cloned”幻灯片并且不再响应click事件为止。到那时，仍可以拖动并使用滑块，但是单击幻灯片去到有效位置。

感谢您的帮助！

HTML
<section class="hollow-hero-22">
    <div id="backdrop"></div>
    <div class="flex-container">
        <div id="img-slider">
            <img src="http://staging.bigtuna.com/hollow.theme/site/wp-content/uploads/2018/11/hero-22_1.jpg" alt="">
            <img src="http://staging.bigtuna.com/hollow.theme/site/wp-content/uploads/2018/11/hero-22_2.jpg" alt="">
            <img src="http://staging.bigtuna.com/hollow.theme/site/wp-content/uploads/2018/11/hero-22_3.jpg" alt="">
            <img src="http://staging.bigtuna.com/hollow.theme/site/wp-content/uploads/2018/11/hero-22_4.jpg" alt="">
        </div>
    </div>
    <div id="control-wrap" class="flex-container">
        <div id="control-slider">
            <img src="http://staging.bigtuna.com/hollow.theme/site/wp-content/uploads/2018/11/hero-22_1.jpg" alt="">
            <img src="http://staging.bigtuna.com/hollow.theme/site/wp-content/uploads/2018/11/hero-22_2.jpg" alt="">
            <img src="http://staging.bigtuna.com/hollow.theme/site/wp-content/uploads/2018/11/hero-22_3.jpg" alt="">
            <img src="http://staging.bigtuna.com/hollow.theme/site/wp-content/uploads/2018/11/hero-22_4.jpg" alt="">
        </div>
        <div id="info-card">
            <h1>Company Name Heading & Information</h1>
            <p>This is filler content. The text in this region will updated by our professional content writers. This section will be updated. This is only filler content.</p>
            <a href="#">About Us <i class="fa fa-caret-right"></i></a>
        </div>
    </div>
</section>


CSS
.hollow-hero-22 {
    position: relative;
    overflow: hidden;
    padding-top: 2rem;
}
.hollow-hero-22 #backdrop {
    position: absolute;
    bottom: 0;
    left: 50%;
    height: 80%;
    width: 90%;
    background: #E3E3E3;
    transform: translateX(-50%);
}
.hollow-hero-22 #img-slider {
    flex: 1;
    width: 100%;
}
.hollow-hero-22 #control-wrap {
    align-items: flex-end;
    position: relative;
    margin-top: -222px;
    margin-bottom: 4rem;
}
.hollow-hero-22 #control-slider {
    width: 46%;
}
.hollow-hero-22 #control-slider img {
    padding-right: .6rem;
    cursor: pointer;
}
.hollow-hero-22 #info-card {
    width: 55%;
    padding: 3rem 3rem 0;
    background: #E3E3E3; 
}
.hollow-hero-22 h1 {
    color: #000;
    margin-bottom: 1rem;
}
.hollow-hero-22 p {
    color: #000;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}
.hollow-hero-22 a {
    display: inline-flex;
    align-items: center;
    padding: .5rem 1.5rem;
    color: #FFF;
    background: lime;
}
.hollow-hero-22 a:hover {
    background: green;
}
.hollow-hero-22 a i {
    transition: all .3s ease;
    padding-left: .5rem;
}
.hollow-hero-22 a:hover i {
    padding-left: 1rem;
}
@media only screen and (max-width: 767px) {
    .hollow-hero-22 #backdrop {
        width: 100%;
    }
}


JS
const $imgSlider = $('.hollow-hero-22 #img-slider')
const $ctrlSlider = $('.hollow-hero-22 #control-slider')
const $slide = $('.hollow-hero-22 #control-slider img')

$imgSlider.slick({
    asNavFor: $ctrlSlider,
    arrows: false,
    infinite: false
})

$ctrlSlider.slick({
    asNavFor: $imgSlider,
    slidesToShow: 3,
    arrows: false
})

$slide.on('click', function() {
    console.log('click')

    $slideIndex = $(this).attr('data-slick-index')
    console.log('Slide index: ', $slideIndex)

    $imgSlider.slick('slickGoTo', $slideIndex)
    $ctrlSlider.slick('slickGoTo', $slideIndex)
})