slick sliderでslideが反映されない。（リロードすると普通に動作する）

railsでslick.sliderを使用し商品のスライドショーを作成しています。
サムネイル画像と連動させる形のスライドを実装したのですが、該当ページにアクセスすると、slickのクラスも反映されておらず、スライドがなりません。
ページをリロードしてみて、検証で確認をしてみるとslickのクラスが反映されていて通常通りスライドショーが動きます。

hamlの中の記載はこのようになっています。

haml
1.main-container
2  .item-photos
3    %ul#slider
4      %li.slide-item
5      = image_tag "/images/test_image.jpg",alt:"test-image",class:"slide-image"
6      %li.slide-item
7      = image_tag "/images/logo.png",alt:"test-image",class:"slide-image"
8      %li.slide-item
9      = image_tag "/images/test_image.jpg",alt:"test-image",class:"slide-image"
10    %ul#thumbnail-list
11      %li.thumbnail-item
12      = image_tag "/images/test_image.jpg",alt:"test-image",class:"thumbnail-image"
13      %li.thumbnail-item
14      = image_tag "/images/logo.png",alt:"test-image",class:"thumbnail-image"
15      %li.thumbnail-item
16      = image_tag "/images/test_image.jpg",alt:"test-image",class:"thumbnail-image"

slider.jsの中の記述

slider.js
1$(function(){
2  var slider = "#slider";
3  var thumbnailItem = "#thumbnail-list .thumbnail-item";
4  
5  $(thumbnailItem).each(function(){
6   var index = $(thumbnailItem).index(this);
7   $(this).attr("data-index",index);
8  });
9  
10
11  $(slider).on('init',function(slick){
12   var index = $(".slide-item.slick-slide.slick-current").attr("data-slick-index");
13   $(thumbnailItem+'[data-index="'+index+'"]').addClass("thumbnail-current");
14  });
15  $(slider).on('beforeChange',function(event,slick, currentSlide,nextSlide){
16    $(thumbnailItem).each(function(){
17      $(this).removeClass("thumbnail-current");
18    });
19    $(thumbnailItem+'[data-index="'+nextSlide+'"]').addClass("thumbnail-current");
20  });
21  $(thumbnailItem).on('click',function(){
22    var index = $(this).attr("data-index");
23    $(slider).slick("slickGoTo",index,false);
24  });
25
26  $(slider).slick({
27    arrows: false,
28    fade: true,
29    infinite: false,
30    centerMode: true,
31  });
32});

色々と調べて、display:flexがitem-photosという親要素に掛かっているせいではないかなど言われ、試したのですが変わりませんでした。

scss
1  .main-container {
2    display: flex;
3    margin-top: 16px;
4    .item-photos {
5      min-width: 300px;
6      max-width: 300px;
7      min-height: 375px;
8      display: flex;
9      flex-direction: column;
10      justify-content: center;
11      margin: 0;
12      #slider{
13        width: 300px;
14        height: 320px;
15        margin:0 auto 30px;
16        display: flex;
17        .slide-item{
18          max-height: 300px;
19          max-width: 100%;
20          height: 300px;
21          width: 300px;
22          .slide-image{
23            width: 100%;
24            height: 100%;
25            margin: 0 auto;
26          }  
27        }
28      }
29      #thumbnail-list{
30        width: 300px;
31        margin: 0 auto;
32        display: flex;
33        justify-content: space-between;
34        flex-wrap:wrap;
35        .thumbnail-item{
36          margin-bottom: 10px;
37          box-sizing: border-box;
38          position:relative;
39          height: 60px;
40          width: 60px;
41          &::after{
42            content:'';
43            background-color: rgba(0,0,0,0.5);
44            position:absolute;
45            display: block;
46            top: 0;
47            left: 0;
48            width: 100%;
49            height: 100%;
50            opacity: 1;
51            transition: .3s opacity linear;
52          }
53          &.thumbnail-current:after{
54            opacity: 0;
55          }
56          .thumbnail-image{
57            width: 100%;
58            height: 100%;
59            margin: 0 auto;
60          } 
61        }
62      }
63    }