jQuery Slick 插件在父级调整大小后不调整大小

Question

我有一个带有可折叠侧边栏导航的项目，内容填充了剩余部分 space；当导航折叠时，内容会填满整个屏幕。

我正在使用 jQuery Slick 来显示一些文本片段，在大多数情况下，它的响应效果很好。但是，每当我切换导航时，Slick 不会响应其父级的新宽度，而是显示下一张幻灯片的一部分而不是填满屏幕。

我该怎么做才能解决这个问题？

这是一个演示问题的 jsfiddle： http://jsfiddle.net/b82x7rr2/

这是一些代码：

<nav>
    <ul>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
    </ul>
</nav>
<div class="wrapper">
    <p><a href="#" class="close">Toggle Navigation</a></p>

    <div class="slider">
        <div>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
        </div>
        <div>
            <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        </div>
    </div>
</div>
<style> 
    nav{
        width: 300px;
        position:fixed;
        top:0;
        left:0;
        height:100%;
        background:#000;
    }
    .wrapper{
        padding:0 0 0 300px;
        text-align:center;
    }
    p{
        margin:10px;    
    }
    body.active nav{
        display:none;
    }
    body.active .wrapper{
        padding:0;
    }
</style>
<script type="text/javascript">
    $().ready(function(){
        $(".slider").slick();
        $(".close").on("click", function(){
            if( !$("body").hasClass("active") ){
                $("body").addClass("active");   
            }else{
                $("body").removeClass("active");    
            }
        });
    });
</script>

Answer 1

试试这个：http://jsfiddle.net/b82x7rr2/2/

$().ready(function(){
    $(".slider").slick();               
    $(".close").on("click", function(){
        if( !$("body").hasClass("active") ){
            $("body").addClass("active");   
            $(".slider").slick('slickRemove');
        }else{
            $("body").removeClass("active");
            $(".slider").slick('slickRemove');  
        }
    });
});

$(".slider").slick('slickRemove'); 从屏幕上删除下一张幻灯片，而不重新加载当前幻灯片

更简洁fiddle：http://jsfiddle.net/b82x7rr2/3/

$().ready(function(){
    $(".slider").slick();               
    $(".close").click(function(){
        $("body").toggleClass("active");   
        $(".slider").slick('slickRemove');  
        }
    );
});

Answer 2

我发现绕过这个问题的唯一方法是

 $(".slider").slick('getSlick').slickGoTo(slick.slickCurrentSlide());

每次切换导航时。这是 fiddle

jQuery Slick 插件在父级调整大小后不调整大小

jQuery Slick plugin not resizing after parent resizes

javascript

css

jquery

slideshow

carousel