slickを使用してのスライダー作成で、他のページからトップページに戻ってきた際にslickでスライダー作っている部分のveiwが崩れる。

Question

slickを使ってスライダーを作成しました。

トップページではスライダーうまく動作していますが、
他のページから、トップに戻ってきたらveiwが崩れます
もう一度リロードすれば治ります。
原因は何でしょうか？

slick.js/slick.min.js/slick.scss/slick-theme.scss
を追加しました。

jsファイル
$(function() {
  $('.advertisement-box').slick({
      dots: true,
      // 下のドット表示
      arrows: true,
      autoplay: true,
      // 自動再生。trueで自動再生される。
      speed: 400,
      // 自動再生や左右の矢印でスライドするスピード
      autoplaySpeed: 3000,
      // 自動再生で切り替えをする時間
      accessibility: true,
      // アクセシビリティ。左右ボタンで画像の切り替えをできるかどうか
  });
});

ファイル名index.html.haml

.main-top 
  .advertisements 
    .advertisement 
      %ul.advertisement-box
        %li
          = image_tag "pictweet.jpg", class: "scroll-advertisement one"
        %li
          = image_tag "sns_01.jpg", class: "scroll-advertisement second"
        %li
          = image_tag "pictweet.jpg", class: "scroll-advertisement third"
          .icon-icon-two
            = link_to "https://itunes.apple.com/jp/app/id667861049?l=ja&mt=8" do
              =image_tag "https://web-jp-assets.mercdn.net/_next/static/images/app-store-a5c17948c6fd6d5b60b13d421cd60b35.svg", class:"apple apple-one", alt: ""
            = link_to "https://play.google.com/store/apps/details?id=com.kouzoh.mercari&hl=ja" do
              =image_tag "https://web-jp-assets.mercdn.net/_next/static/images/google-play-495575abb895b405aa6336b2a4304958.svg", class: "google google-one", alt: ""  

Answer 1

$(document).on('turbolinks:load', function() {})
追加したら治りました。
ありがとうございました。

$(document).on('turbolinks:load', function() {


  $(function() {
    $('.advertisement-box').slick({
        dots: true,
        // 下のドット表示
        arrows: true,
        
        autoplay: true,
        // 自動再生。trueで自動再生される。
        speed: 400,
        // 自動再生や左右の矢印でスライドするスピード
        autoplaySpeed: 3000,
        // 自動再生で切り替えをする時間
        accessibility: true,
        // アクセシビリティ。左右ボタンで画像の切り替えをできるかどうか
    });
  });
});