精彩弹出窗口和光滑.js和响应设置之间的冲突

Question

我正在尝试在响应式显示屏中使用 Slick.js 轮播和 Magnific 弹出灯箱.

当

光滑的滑块处于其基本形式时，它正在工作，但是当窗口足够紧以触发断点并且"要显示的幻灯片"更少时，Magnific 弹出窗口不再工作，只需在新的缩略图中打开链接的图片，我必须重新加载页面才能使其再次工作......

这是我的代码：

<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/magnific-popup.css" type="text/css">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<link rel="stylesheet" href="css/normalize.css" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js"  type="text/javascript"></script>        
<script type="text/javascript" src="js/jquery.magnific-popup.js"></script>             
<script type="text/javascript" src="js/slick.js"></script>
<script type="text/javascript" src="js/responsee.js"></script>            

    <!--Projet Un-->                
    <div class="proj_block">
        <div>
            <div class="margin line">
                <div class="slick_slide s-12 l-6-slick center">               
                    <a class="proj_un mfp-image" href="img/index-test-img-big.jpg">
                            <img src="img/index-test-img.jpg"/>
                    </a>
                    <a class="proj_un mfp-image" href="img/index-test-img-big.jpg">
                            <img src="img/index-test-img.jpg"/>
                    </a>
                    <a class="proj_un mfp-image" href="img/index-test-img-big.jpg">
                            <img src="img/index-test-img.jpg"/>
                    </a>
                    <a class="proj_un mfp-image" href="img/index-test-img-big.jpg">
                            <img src="img/index-test-img.jpg"/>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!--Fin Projet Un-->
    <!--Projet Deux-->         
    <div class="proj_block">
        <div>
            <div class="margin line">
                <div class="slick_slide s-12 l-6-slick center">
                    <a class="proj_deux mfp-image" href="img/index-test-img-big.jpg">
                            <img src="img/index-test-img.jpg"/>
                    </a>
                    <a class="proj_deux mfp-image" href="img/index-test-img-big.jpg">
                            <img src="img/index-test-img.jpg"/>
                    </a>
                    <a class="proj_deux mfp-image" href="img/index-test-img-big.jpg">
                            <img src="img/index-test-img.jpg"/>
                    </a>
                    <a class="proj_deux mfp-image" href="img/index-test-img-big.jpg">
                            <img src="img/index-test-img.jpg"/>
                    </a>
                    <a class="proj_deux mfp-image" href="img/index-test-img-big.jpg">
                            <img src="img/index-test-img.jpg"/>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!--Fin Projet Deux-->
/*SLICK SLIDE*/ 
<script type="text/javascript">
        $(document).ready(function() {                          
            $('.slick_slide').slick({
              infinite: true,
              speed: 300,
              slidesToShow: 3,
              slidesToScroll: 3,
              responsive: [
                {
                  breakpoint: 860,
                  settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                  }
                },
                {
                  breakpoint: 540,
                  settings:{
                    slidesToShow: 1,
                    slidesToScroll: 1
                  }
                }
              ]
            });            
        });
</script>
/*FIN SLICK SLIDE*/ 
/*MAGNIFIC POPUP*/
<script type="text/javascript">             
        $(document).ready(function() {   
            $('.proj_un').magnificPopup({
                gallery: {
                  enabled: true
                },
                removalDelay: 300,
                mainClass: 'mfp-fade'
            });
            $('.proj_deux').magnificPopup({
                gallery: {
                  enabled: true
                },
                removalDelay: 300,
                mainClass: 'mfp-fade'
            });
        });
</script>
/*FIN MAGNIFIC POPUP*/

这是野兽的链接：http://madbook.net/mad/help/index-test.html

我真的不是这方面的专家，所以我希望你看到这一切不会尖叫和哭泣......

如果你能带领我走上好路，那就太好了，因为我看不出问题出在哪里......

谢谢

狂

Answer 1

首先，我忘记了，但这里是 Slick 的 js： https://github.com/kenwheeler/slick/blob/master/slick/slick.js

实际上，我发现每次通过断点时都会销毁domNode。

我只是在 checkResponsive 函数中删除了刷新函数（包含销毁函数）的调用，它正在工作......

我不知道它是否会产生其他问题......