Rails6 + webpacker slick is not a functionとエラーが出る

いつもお世話になっております。

Slickを使用してスライドショーを実装しようとしているのですが、slick is not a functionと表示が出て、解決できません。

Jqueryはyarnにてインストールしております。
以下の記事を参照しました。

https://qiita.com/masahisa/items/eaacb0c3b82f4a11fc13

エラーから考えるに、jsファイルの読み込み順が原因かと思われるのですが、私からは問題ないように思えます。
「webpack + slick is not a function」などのキーワードを中心に原因を探しているのですが、見つかりません・・・

恐れ入りますが、アドバイス頂ければ幸いです。よろしくお願いします。

解決したいこと

エラーを解決したい。(slick is not a function)

画像　https://gyazo.com/8c81b40c747c7888e166eff719ead4a8

環境

Rails 6.0.3.1
ruby 2.7.1
webpacker 4.2.2
gem "haml-rails", "~> 2.0"
yarn

関連ファイル

application.html.haml

!!!
%html
  %head
    %meta{content: "text/html; charset=UTF-8", "http-equiv": "Content-Type"}/
    %title Badsuru
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
  %body
    = yield

index.html.haml

= javascript_pack_tag 'slick'
= javascript_pack_tag 'slide-show'
= render "shared/header"
= render "shared/nav"
= render "shared/main"


%h1 トップページ
- if user_signed_in?
  %h2 ログインしています
  = link_to "ログアウト", destroy_user_session_path, method: :delete
- else
  %h2 ログインしていません
  = link_to "ログイン", new_user_session_path
  = link_to "新規登録", new_user_registration_path


.index
  - @datas.each do |data|
    = data.club
    = image_tag data.avatar.url

= render "shared/footer"

main.html.haml

.main-visual
  = image_tag '/images/visual-bg.jpg', alt: '画像背景', height: '522px', width: '100%', class: 'main-visual__img--bg'
  .main-visual__images
    = image_tag '/images/visual-1.jpg', id: "main-visual__images-js", alt: '画像背景', class: 'main-visual__img--main'
    = image_tag '/images/visual-2.jpg', id: "main-visual__images-js", alt: '画像背景', class: 'main-visual__img--main'
    = image_tag '/images/visual-3.jpg', id: "main-visual__images-js", alt: '画像背景', class: 'main-visual__img--main'

(中略)

packs/slick.js

slick公式サイトからダウンロードしたものを使用

slide-show.js(読み込み確認のため記述を最低限にしています)

$(function(){
  $('main-visual__images').slick({
  });
});

package.json

{
  "name": "badsuru",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "jquery": "^3.5.1",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.0"
  }
}

environment.js

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery'
    })
)

module.exports = environment