slick.jsで1枚目が表示されない(グレーで表示される)

最初は非表示にしてあるスライダーを、画像クリックと同時にモーダル表示・スライダーにするというページを作っていますが、
1枚目のみグレーで表示されてしまいます。
indexメソッドを使って表示先と連携させているのですが、
0番目だけ取得できていないのかと思いきや、他のものからスライドして来ると一番最初は表示されていなかったものも表示されます。
解決策がございましたらご教示お願いします。

参考サイト:
https://usagi-online.com/s/190730SND/?link=190913SND_C

html
1<div class="section items">
2        <ul>
3          <li><a data-slide-index="0" href=""><img src="img/a.jpg" alt=""></a></li>
4          <li><a data-slide-index="1" href=""><img src="img/b.jpg" alt=""></a></li>
5          <li><a data-slide-index="2" href=""><img src="img/c.jpg" alt=""></a></li>
6          <li><a data-slide-index="3" href=""><img src="img/d.jpg" alt=""></a></li>
7        </ul>
8      </div>
9
10<div class="overlay"></div>
11
12      <div class="modal">
13        <div class="modal-slide">
14          
15          <div class="modal-slide-item">    
16            <div>
17              <img data-lazy="img/a.jpg" alt="style" class="fadeimg">
18            </div>               
19          </div><!--modal-slide-item-->
20
21<!--上記が4つ-->
22
23        </div><!--modal-slide-->
24</div><!--modal-->

css
1.section {
2  ul {
3    display: flex;
4    flex-wrap: wrap;
5    li {
6      width: calc(100% / 3);
7      box-sizing: border-box;
8      padding: 1px;
9      a {
10        display: block;
11      }
12    }
13  }
14}
15
16.overlay {
17  width: 100%;
18  height: 100%;
19  background: rgba(0,0,0,0.4);
20  position: fixed;
21  top: 0;
22  left: 0;
23  z-index: 100;
24  display: none;
25}
26
27.overlay.opacity {
28  display: block;
29}
30 
31.modal {
32  z-index: -1;
33  position: fixed;
34  top: 8%;
35  left: 50%;
36  transform: translateX(-50%);
37  opacity: 0;
38}
39
40.modal.show {
41  z-index: 200;
42  opacity: 1;
43  transition: opacity .8s;
44}
45
46.modal-slide-item > div > img {
47   transition: .3s; 
48}
49
50.slick-slide img {
51   display: block; 
52}
53
54img.fadeimg {
55   -webkit-backface-visibility: hidden; 
56   backface-visibility: hidden;
57}

javascript
1$(function(){
2var modal = $('.modal');
3    var overlay = $('.overlay');
4
5    $('.items a').on('click', function(event){
6      event.preventDefault();
7      modal.addClass('show');
8      overlay.addClass('opacity');
9
10      var index = $(this).data('slide-index');
11      $('.modal-slide').slick('slickGoTo', index, true);
12    });
13
14    $('.modal-slide').slick({
15      lazyLoad: 'ondemand',
16      fade: true,
17    });
18
19    $('.overlay, .modal-close').on('click',function() {
20    modal.removeClass('show');
21    overlay.removeClass('opacity');
22  });
23
24    $(window).on('load resize',function(event){
25      var imgWidth = $('.items img').width();
26      var imgHeight = $('.items img').height();
27      var sliderHeight = $(window).height() - 160;
28      var sliderWidth = sliderHeight * (imgWidth / imgHeight);
29
30      $('.modal img').height(sliderHeight);
31      $('.modal').width(sliderWidth).height(sliderHeight);
32      $('.modal .credit').width(sliderWidth);
33      $('.modal .slick-arrow').css('top', (sliderHeight / 2) - 35);
34
35    });
36});