Wsrtjtyk

I have 2 sliders which act as the nav for each other. Both sliders behave correctly until the bottom slider reaches a '.slick-cloned' slide and no longer responds to the click event. At that point, the sliders can still be dragged and work, but clicking on a slide to go to is effectively broken.

Thanks for the help!

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)

})