使用滑动滑块js轮播时，单击主图像时图像消失

Question

我正在使用在此处找到的光滑滑条-https://kenwheeler.github.io/slick/，并且我专门在使用滑条同步，这样当有人单击轮播中的图像时，它将单击的图像渲染为轮播旁边的较大图像当您点击该大图时，它应该会以灯箱形式弹出。问题是，当您单击轮播中的这些图像之一时，它将在较大的图像标签中很好地加载该图像，但是当您单击该较大的图像时，其中一两个图像将从轮播中消失。我假设我的javascript中未正确设置某些内容。对此的任何帮助将不胜感激，因为我尝试更改“ slidesToShow”和“ slidesToScroll”值没有任何运气，但我不确定从何而来，但这是我的html中的JavaScript。

    $('.slider-cards_center').slick({
                    dots: false,
                    vertical: true,
                    infinite: true,
                    speed: 300,
                    slidesToShow: 5,
                    slidesToScroll: 1,
                    verticalSwiping: true,
                    asNavFor: '.slider-for',
                                        focusOnSelect: true,
                    responsive: [
                        {
                            breakpoint: 1024,
                            settings: {
                                slidesToShow: 1,
                                slidesToScroll: 1,
                                infinite: true,
                                dots: false
                            }
                        },
                        {
                            breakpoint: 600,
                            settings: {
                                slidesToShow: 1,
                                slidesToScroll: 1
                            }
                        },
                        {
                            breakpoint: 480,
                            settings: {
                                slidesToShow: 1,
                                slidesToScroll: 1
                            }
                        }

                    ]
    });

    $('.slider-for').slick({
                        dots: false,
                        infinite: true,
                        speed: 300,
                        slidesToShow: 1,
                        slidesToScroll: 1,
                        focusOnSelect: true,
                        asNavFor: '.slider-cards_center',
                        responsive: [
                        {
                            breakpoint: 1024,
                            settings: {
                                slidesToShow: 3,
                                slidesToScroll: 1,
                                infinite: true,
                                dots: false
                            }
                        },
                        {
                            breakpoint: 600,
                            settings: {
                                slidesToShow: 3,
                                slidesToScroll: 1
                            }
                        },
                        {
                            breakpoint: 480,
                            settings: {
                                slidesToShow: 3,
                                slidesToScroll: 1
                            }
                        }

                    ]
    });