slickのスライド表示がうまくいかない

前提・実現したいこと

アコーディオン形式の中にそれぞれスライドを挿入した体裁を作りたくて組んでいます。
スライドはslickを使用しました。

発生している問題・エラーメッセージ

ひとつ目のBOXのスライドは読み込んでくれますが、２つ目がアコーディオンをオープンしても
画像が表示されません。ボタンもしくは矢印を押すと動きますが、最初から表示する方法を探しています。

該当のソースコード

html
1<ul class="accordion-area">
2  <li>
3    <section>
4      <h3 class="title">タイトル01</h3>
5      <div class="box">
6        <div align="left"><p>アコーディオン本文01</p></div>
7          <ul class="slider">
8          <li><img src="img/photo01.jpg" alt="photo01">
9            <div align="center"><p><b>キャプション01タイトル</b></p>
10            <p>キャプション01本文</p></div>
11          </li>
12          <li><img src="photo02.jpg" alt="photo02">
13            <div align="center"><p><b>キャプション02タイトル</b></p>
14            <p>キャプション02本文</p></div>
15          </li>
16          </ul>
17      </div>
18    </section>
19  </li>
20  <li>
21    <section>
22      <h3 class="title">タイトル02</h3>
23      <div class="box">
24      <div class="box">
25        <div align="left"><p>アコーディオン本文02</p></div>
26          <ul class="slider">
27          <li><img src="img/photo03.jpg" alt="photo01">
28            <div align="center"><p><b>キャプション03タイトル</b></p>
29            <p>キャプション03本文</p></div>
30          </li>
31          <li><img src="photo04.jpg" alt="photo02">
32            <div align="center"><p><b>キャプション04タイトル</b></p>
33            <p>キャプション04本文</p></div>
34          </li>
35          </ul>
36      </div>
37    </section>
38  </li>
39</ul>

css
1.slider{
2    width:94%;
3    margin-left : auto;
4    margin-right : auto;
5}
6
7.slider img {
8    width:50vw;
9    height:auto;
10}
11
12.slider .slick-slide .slick-center{
13	transform: scale(0);
14	transition: all .5s;
15	opacity: 0.5;
16}
17
18/*矢印の設定*/
19
20.slick-prev,
21.slick-next {
22    position: absolute;
23    top: 42%;
24    cursor: pointer;
25    outline: none;
26    border-top: 2px solid #666;
27    border-right: 2px solid #666;
28    height: 15px;
29    width: 15px;
30}
31
32.slick-prev {
33    left: -1.5%;
34    transform: rotate(-135deg);
35}
36
37.slick-next {
38    right: -1.5%;
39    transform: rotate(45deg);
40}
41
42/*ドットナビゲーションの設定*/
43
44.slick-dots {
45    text-align:center;
46	margin:20px 0 0 0;
47}
48
49.slick-dots li {
50    display:inline-block;
51	margin:0 5px;
52}
53
54.slick-dots button {
55    color: transparent;
56    outline: none;
57    width:8px;
58    height:8px;
59    display:block;
60    border-radius:50%;
61    background:#ccc;
62}
63
64.slick-dots .slick-active button{
65    background:#333;
66}
67

js
1//アコーディオンをクリック
2$('.title').on('click', function() {
3	$('.box').slideUp(500);
4
5	var findElm = $(this).next(".box");
6
7	if($(this).hasClass('close')){
8		$(this).removeClass('close');
9	}else{
10		$('.close').removeClass('close'); 
11		$(this).addClass('close');
12		$(findElm).slideDown(500);
13	}
14});
15
16//最初のアコーディオンを開く
17$(window).on('load', function(){
18	$('.accordion-area li:first-of-type section').addClass("open"); 
19	$(".open").each(function(index, element){
20		var Title =$(element).children('.title');
21		$(Title).addClass('close');
22		var Box =$(element).children('.box');
23		$(Box).slideDown(500);
24	});
25});
26
27//スライダー
28		$('.slider').slick({
29			autoplay: false,
30			infinite: true,
31			speed: 300,
32			slidesToShow: 1,
33			slidesToScroll: 1,
34			prevArrow: '<div class="slick-prev"></div>',
35			nextArrow: '<div class="slick-next"></div>',
36			centerMode: true,
37			variableWidth: true,
38			dots: true,
39		});
40