slickがうまく適応されません。

Question

ページの左半分上部にslickを実装したいのですが、うまくいきません。

本来なら黒い部分に1枚ずつ表示してあげたいのですが、場所も並びもわけのわからないところにきてしまします。
slickのデフォルトであろうaria-hiddenが反映されてないことにはきづいています。
なにかおわかりのかたご教授よろしくおねがいいたします。

          .slider-area
            .slider
              li = image_tag 'no-image-sell.png', style: 'max-height:300px; max-width:390px;'
              li = image_tag 'LINE_Text_Logo_TypeB.png', style: 'max-height:300px; max-width:390px;'

          .slider-area {    
            .slider {
              height: 300px;
              background-color: #182a3d;
              img {
                max-height: 300px;
                max-width: 390px;
              }
            }
          }

    $('.slider').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
    });

Comments

[m.ts10806]

主にJavaScript、CSS側の対応だと思うので、サーバーサイドの言語の要素はないほうが回答を得やすくなると思います。
ブラウザに表示したときのHTMLを提示し、SCSSもコンパイル後のCSSをご提示ください。

[TaiseiMitomi]

失礼しました変更いたしました！

[m.ts10806]

「言語名」のところが変更されただけでコードは変わってないような