slick.jsのスライダーをハンバーガー内にいれたい

現状

slick.jsを使いスライダーを制作しているのですが、
ハンバーガーメニュー内にslick.jsを用いて制作したスライダーを入れると、
ハンバーガーメニューを開いた最初の数秒間withが指定されてない（slick-trackなどのwithが０になっている）細長い状態で
スライダーが出てきてしまいます。

数秒立つと、幅が取得され（？）綺麗なスライダーとして機能します。

実現したいこと

ハンバーガーメニューを開いた時、最初から幅がしっかりと指定された状態でスライダーがでてきてほしい。

現状のコード

初心者が作ったものなのでかなり見にくいとは思いますがこちらコードの一部になります。
ちなみにハンバーガーメニューは「fatNav」で開くようになっています。

jQuery fatNav:http://glitchbone.github.io/jquery-fatNav/

html
1　　　　　<div class="fat-nav">
2　　　　　　<div class="fat-nav__wrapper">
3　			<ul class="menu">
4					<li class="menu_child">
5						<ul class="menu">
6							<li><a href="#">01</a></li>
7							<li><a href="#">02</a></li>
8							<li><a href="#">03</a></li>
9							<li><a href="#">04</a></li>
10						</ul>
11					</li>
12               </ul>
13
14　　　　　　　　　　　　　
15			<div id="top_news"><!-- スライド部分 -->
16				<span>NEWS</span>
17				<ul class="slider">
18					<li>
19						<i class="day">2018.00.00</i>
20						<p class="title">タイトル</p>
21						<a class="btn_more" href="#">詳しくはこちら</a>
22					</li>
23					<li>
24						<i class="day">2018.00.01</i>
25						<p class="title">タイトル</p>
26						<a class="btn_more" href="#">詳しくはこちら</a>
27					</li>
28					<li>
29						<i class="day">2018.00.02</i>
30						<p class="title">タイトル</p>
31						<a class="btn_more" href="#">詳しくはこちら</a>
32					</li>		
33					<li>
34						<i class="day">2018.00.03</i>
35						<p class="title">タイトル</p>
36						<a class="btn_more" href="#">詳しくはこちら</a>
37					</li>										
38				</ul>	
39	         </div>
40            <div>
41　　　　　　</div>
42

js
1
2	<script>
3　　　　/*ハンバーガーメニュー*/
4		$(function() {
5			$.fatNav();
6		});
7
8		/*　スライダー　*/
9		 $(document).ready(function(){
10			$('.slider').slick({
11				slidesToShow: 1,
12				autoplay: true,
13				autoplaySpeed: 5000,
14				infinite: true,
15				speed: 1000,
16				arrows: true,
17			});
18		 });
19	</script>