изображение исчезает при нажатии на основное изображение при использовании слайдера js карусель - PullRequest
Новая
       45

изображение исчезает при нажатии на основное изображение при использовании слайдера js карусель

0 голосов
/ 06 мая 2020

Я использую найденный здесь гладкий слайдер - https://kenwheeler.github.io/slick/, и я специально использую синхронизацию слайдера, чтобы, когда кто-то нажимает на изображение в карусели, он отображает это изображение в более крупном размере рядом с каруселью, и она должна появляться в виде лайтбокса, когда вы нажимаете на это увеличенное изображение. Проблема в том, что когда вы щелкаете одно из этих изображений в карусели, оно загружает это изображение в более крупный тег изображения, но когда вы нажимаете на это увеличенное изображение, одно или два изображения исчезают из карусели. Я предполагаю, что у меня что-то неправильно настроено в моем javascript. Любая помощь с этим будет оценена. Я попытался изменить значения «slidesToShow» и «slidesToScroll», но безуспешно, и я не совсем уверен, где отсюда go, но вот мой javascript внутри моего html. 

    $('.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
                            }
                        }

                    ]
    });
...