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插件在父級調整大小後沒有調整大小

回答

相關問題