Ползунки Slick Slider 2, не соответствующие слайдам, и ползунки внутри Bootstrap Модальные

Question

Как вы можете видеть, у меня есть 2 скользящих слайдера, работающих на этой странице: один виден по умолчанию, а второй запускается в режиме bootstrap, когда пользователь щелкает один из слайдов первого. Это чтобы увидеть слайд индивидуально и в большем размере. Мой пример использования просто так, и я очень близок к завершению: Когда пользователь нажимает на любой слайд ползунка, должен появиться модал с скользящим ползунком с параметром 1 slideToShow вместо 3, чтобы изображение было больше, слайд, который отображается на модале, должен быть тем же, на который нажал один пользователь.

Issues . 1. Когда страница обновляется и пользователь нажимает на один из слайдов, модальный слайдер открывается с ошибочным представлением, как только я начинаю нажимать следующую и предыдущую стрелку, это исчезает, почему это происходит? см. окно с ошибками: 2. Как мне показать тот же слайд, на котором кликера пользователь также находится на модале, сейчас модальный слайдер открывается как новый слайдер, и первый слайд отображается все время, а не один пользователь нажал

.stack-list-slider-slider-area {
    margin-top: 30px;
}
.stack-list-slider-slider-area .stack-list-slider-slide h3 {
    font-size: 15px;
    text-align: center;
    margin-top: 18px;
}
.stack-list-slider-slider-area button.slick-prev.slick-arrow {
    position: relative;
    width: 30px;
    overflow: hidden;
    background: transparent;
    border: 0;
    position: absolute;
    left: 0px;
    right: auto;
    z-index: 11;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
}
.stack-list-slider-slider-area button.slick-prev.slick-arrow:after {
    content: "<";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #00805f;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.stack-list-slider-slider-area button.slick-next.slick-arrow {
    position: relative;
    width: 40px;
    overflow: hidden;
    background: transparent;
    border: 0;
    position: absolute;
    left: auto;
    right: 0px;
    z-index: 11;
    top: 50%;
    transform: translateY(-50%);
    height: 40px;
}
.stack-list-slider-slider-area button.slick-next.slick-arrow:after {
    content: ">";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #00805f;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.stack-list-slider-slider-area .stack-list-slider.slick-initialized.slick-slider {
    position: relative;
}
.stack-list-slider-slider-area .stack-list-slider-slide {
    padding: 30px 0;
}
.stack-list-slider-slider-area .slider-img img {
    display: block;
    width: 100%;
}
.stack-list-slider-slider-area .slick-initialized .slick-slide {
    padding: 0 15px !important;
}
.stack-list-slider-slider-area .stack-list-slider.slick-initialized.slick-slider {
    padding: 0 40px;
}
.stack-list-slider-modal-slider-area {
    margin-top: 30px;
}
.stack-list-slider-modal-slider-area .stack-list-slider-modal-slide h3 {
    font-size: 15px;
    text-align: center;
    margin-top: 18px;
}
.stack-list-slider-modal-slider-area button.slick-prev.slick-arrow {
    position: relative;
    width: 30px;
    overflow: hidden;
    background: transparent;
    border: 0;
    position: absolute;
    left: 0px;
    right: auto;
    z-index: 11;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
}
.stack-list-slider-modal-slider-area button.slick-prev.slick-arrow:after {
    content: "<";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #00805f;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.stack-list-slider-modal-slider-area button.slick-next.slick-arrow {
    position: relative;
    width: 40px;
    overflow: hidden;
    background: transparent;
    border: 0;
    position: absolute;
    left: auto;
    right: 0px;
    z-index: 11;
    top: 50%;
    transform: translateY(-50%);
    height: 40px;
}
.stack-list-slider-modal-slider-area button.slick-next.slick-arrow:after {
    content: ">";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #00805f;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.stack-list-slider-modal-slider-area .stack-list-modal-slider.slick-initialized.slick-slider {
    position: relative;
}
.stack-list-slider-modal-slider-area .stack-list-slider-modal-slide {
    padding: 30px 0;
}
.stack-list-slider-modal-slider-area .slider-img img {
    display: block;
    width: 100%;
}
.stack-list-slider-modal-slider-area .slick-initialized .slick-slide {
    padding: 0 15px !important;
}
.stack-list-slider-modal-slider-area .stack-list-modal-slider.slick-initialized.slick-slider {
    padding: 0 40px;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Practice Html page</title>
    <!-- Slick Slider CSS CDN 3.3.1-->
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
    <!-- Bootstrap CSS CDN 3.3.1-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <!-- Styles -->
    <link rel="stylesheet" type="text/css" href="style.css">
</head><!-- end head -->

<body>
    <div class="stack-list-slider-slider-area">
        <div class="container">
            <div class="stack-list-slider">
                <div class="stack-list-slider-slide" data-toggle="modal" data-target="#modalId">
                    <div class="slider-img">
                        <img src="https://www.dropbox.com/s/nnbizh3joq3l71n/1.jpg?dl=1" alt="">
                    </div>
                    <h3>Product Name</h3>
                </div> <!-- /.stack-list-slider-slide -->
                <div class="stack-list-slider-slide" data-toggle="modal" data-target="#modalId">
                    <div class="slider-img">
                        <img src="https://www.dropbox.com/s/9k753y33lfwnnnw/2.jpg?dl=1" alt="">
                    </div>
                    <h3>Product Name</h3>
                </div> <!-- /.stack-list-slider-slide -->
                <div class="stack-list-slider-slide" data-toggle="modal" data-target="#modalId">
                    <div class="slider-img">
                        <img src="https://www.dropbox.com/s/9dven42pc2o012j/3.jpg?dl=1" alt="">
                    </div>
                    <h3>Product Name</h3>
                </div> <!-- /.stack-list-slider-slide -->
                <div class="stack-list-slider-slide" data-toggle="modal" data-target="#modalId">
                    <div class="slider-img">
                        <img src="https://www.dropbox.com/s/feqzlynvgryieh5/4.jpg?dl=1" alt="">
                    </div>
                    <h3>Product Name</h3>
                </div> <!-- /.stack-list-slider-slide -->



            </div> <!-- /.stack-list-slider -->


        </div><!-- end container -->
    </div><!-- end slider area -->



    <!-- img gallary modal start -->

    <div id="modalId" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <div class="stack-list-slider-modal-slider-area">
                            <div class="stack-list-modal-slider">
                                <div class="stack-list-slider-modal-slide" >
                                    <div class="slider-img">
                                        <img src="https://www.dropbox.com/s/nnbizh3joq3l71n/1.jpg?dl=1" alt="">
                                    </div>
                                    <h3>Product Name</h3>
                                </div> <!-- /.stack-list-slider-slide -->
                                <div class="stack-list-slider-modal-slide" >
                                    <div class="slider-img">
                                        <img src="https://www.dropbox.com/s/9k753y33lfwnnnw/2.jpg?dl=1" alt="">
                                    </div>
                                    <h3>Product Name</h3>
                                </div> <!-- /.stack-list-slider-slide -->
                                <div class="stack-list-slider-modal-slide" >
                                    <div class="slider-img">
                                        <img src="https://www.dropbox.com/s/9dven42pc2o012j/3.jpg?dl=1" alt="">
                                    </div>
                                    <h3>Product Name</h3>
                                </div> <!-- /.stack-list-slider-slide -->
                                <div class="stack-list-slider-modal-slide" >
                                    <div class="slider-img">
                                        <img src="https://www.dropbox.com/s/feqzlynvgryieh5/4.jpg?dl=1" alt="">
                                    </div>
                                    <h3>Product Name</h3>
                                </div> <!-- /.stack-list-slider-slide -->
                
                
                
                            </div> <!-- /.stack-list-slider -->
                
                
                    </div><!-- end slider area -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>
    <!-- img gallary modal ends -->

    <!-- Loading Jquery 3.4.0 CDN -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <!-- Loading Jquery 3.4.0 CDN -->
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <!-- Loading Slick Slider CDN -->
    <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>


    <script>
        $(document).ready(function () {
            $('.stack-list-slider').slick({
                slidesToShow: 3,
                slidesToScroll: 1,
                autoplay: false,
                arrows: true,
                asNavFor: ".stack-list-modal-slider",


                responsive: [
                    {
                        breakpoint: 991,
                        settings: {
                            slidesToShow: 3,
                        }
                    },
                    {
                        breakpoint: 767,
                        settings: {
                            slidesToShow: 2,
                        }
                    },
                    {
                        breakpoint: 480,
                        settings: {
                            slidesToShow: 1,
                        }
                    },
                ]
            });

            $('.stack-list-modal-slider').slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                autoplay: false,
                arrows: true,
                asNavFor: ".stack-list-slider",

            });

        });
    </script>

</body>

</html>

Answer 1

добавить этот раздел

$('#myModal').on('shown.bs.modal', function () {
   //write your code here 
});

полный код

$(document).ready(function () {
$('.stack-list-slider').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: false,
arrows: true,
asNavFor: ".stack-list-modal-slider",
responsive: [
  {
    breakpoint: 991,
    settings: {
      slidesToShow: 3,
    }
  },
  {
    breakpoint: 767,
    settings: {
      slidesToShow: 2,
    }
  },
  {
    breakpoint: 480,
    settings: {
      slidesToShow: 1,
    }
  },
]
});
});

$('#modalId').on('shown.bs.modal', function () {
  $('.stack-list-modal-slider').slick({
    slidesToShow: 1,
slidesToScroll: 1,
autoplay: false,
arrows: true,
asNavFor: ".stack-list-slider",
});
});

ссылка здесь https://codepen.io/mhfuad/pen/yLNRagb

Я думаю, что это решение на данный момент

Answer 2

Получение «data-slick-index» при нажатии на первый слайд и использование его для установки модального слайдера с помощью «slickGoTo» устранило проблему соответствия слайдов. Что касается ошибки, потребовалось несколько исправлений 1) используйте «unslick», когда не используете модальный слайдер, и запускайте модальный слайдер только тогда, когда модальный режим открыт (благодаря MH Fuad), ошибка, по-видимому, происходит из-за нескольких слайдеров в одна страница. Вот мой jquery

jQuery(document).ready(function () {
           jQuery('.stack-list-slider').slick({
                slidesToShow: 3,
                slidesToScroll: 1,
                autoplay: false,
                arrows: true,
                infinite: true,
                asNavFor: ".stack-list-modal-slider",
                responsive: [
                    {
                        breakpoint: 991,
                        settings: {
                            slidesToShow: 3,
                        }
                    },
                    {
                        breakpoint: 767,
                        settings: {
                            slidesToShow: 2,
                        }
                    },
                    {
                        breakpoint: 480,
                        settings: {
                            slidesToShow: 1,
                        }
                    },
                ]
            });
        });
        var clickedSlick;

       jQuery('.stack-list-slider-slide').each(function () {

           jQuery(this).click(function (e) {
                e.preventDefault();
                var test =jQuery(this).closest('.slick-active').attr('data-slick-index');
                console.log(test);
                clickedSlick = test;
            });

        })


       jQuery('.stack-list-slider .stack-list-modal-slider').removeClass('slick-active');

        //set active class to first thumbnail slides
       jQuery('.stack-list-slider .stack-list-modal-slider').eq(0).addClass('slick-active');



       jQuery('#modalId').on('shown.bs.modal', function () {
           jQuery('.stack-list-modal-slider').slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                autoplay: false,
                arrows: true,
                infinite: true,
                asNavFor: ".stack-list-slider",
            });

           jQuery('.stack-list-modal-slider').slick('slickGoTo', clickedSlick);
        });
       jQuery("#modalId").on('hidden.bs.modal', function (e) {
           jQuery('.stack-list-modal-slider').slick('unslick')
        });