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

我有一个带有可折叠边栏导航的项目，内容填充剩余空间;当导航折叠时，内容会填满整个屏幕。jQuery Slick插件在父级调整大小后没有调整大小

我正在使用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>

来源

2015-03-19 mmmoustache

试试这个：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');从屏幕删除以下幻灯片，无需重新加载当前的幻灯片

更简洁小提琴：http://jsfiddle.net/b82x7rr2/3/

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

来源

2015-03-19 11:50:11 Hkidd

你的答案也可以，我会移动'$（“。slider”）.slick（'slickRemove'）;'在if语句外部并使用'$（“body”）。toggleClass（ “积极”）更简洁。编辑：它也更好，因为更多的响应比重新加载当前幻灯片。 – 2015-03-19 11:57:09

这工作完美，谢谢！ – mmmoustache 2015-03-19 12:14:07

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

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

每次您切换导航。这里是fiddle

来源

2015-03-19 11:52:13

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

回答

相关问题