Slick Slider 2 滑块与 Bootstrap Modal 中的幻灯片和 Slider 不匹配

Question

如您所见，我在此页面中运行了 2 个光滑的滑块，默认情况下会看到一个，当用户单击第一个幻灯片中的一个时，会在引导模式中触发第二个。这是为了单独查看幻灯片并以更大的尺寸查看幻灯片。我的用例很简单，我非常接近完成：当用户单击滑块的任何幻灯片时，应该弹出一个带有 1 slideToShow 选项而不是 3 选项的光滑滑块的模态，因此图像更大， Modal 上显示的幻灯片应与用户单击的幻灯片相同。

问题。 1.当页面刷新并且用户单击其中一张幻灯片时，模态滑块打开时出现错误视图，一旦我开始单击下一个和上一个箭头，这就会消失，为什么会这样？ 查看bugg视图： 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')
        });