エラーがないのにスライドショーが動きません。（slick, jQueryのCDN利用）

slick、jQueryのCDNが読み込まれない

初心者です。slickのCDNを使ってスライドを実装しようとしているのですが、CDNが読み込まれていないようです。検証画面にはエラーは何も出ていません。

試したこと

根本的にjQueryプラグインの使い方がわかっていないので、JSファイルを見直しています。

以前swiperは使ったことがあるのですが、swiperはこのように記述↓（初期化？）するのに

JavaScript
1var swiper = new Swiper('.key_visual', {

slickはjQueryのなかで初めから定義されている＄を使ってこのように↓記述しますよね。

JavaScript
1$('.key_visual').slick({

この違いはなんでしょうか？

また、JavaScriptに↓このように書き始めるのと、

JavaScript
1$('.key_visual').slick({

このように↓書き始めるのとでは、何が違うのでしょうか？

JavaScript
1$(function(){
2 $(document).ready(function(){ 
3 $('.key_visual').slick({

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <link rel="stylesheet" href="slidetest.css">
6    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
7    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
8  </head>
9  <body>
10  <div id="key_visual">
11    <div class="sliders">
12      <div class="slider">
13        <img src="with-i-img/slide-1.jpg" alt="スライド画像1">
14      </div>
15      <div class="slider">
16        <img src="with-i-img/slide-2.jpg" alt="スライド画像2">
17      </div>
18      <div class="slider">
19        <img src="with-i-img/slide-3.jpg" alt="スライド画像3">
20      </div>
21    </div>
22  </div>    
23  <script src="slidetest.js"></script> 
24  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
25  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
26  <script src="slidetest.js"></script>
27　</body>
28 </html>

CSS
1.slider {
2  width:94%;
3  margin:0 auto;
4}
5
6.slider img {
7  width:100%;
8  height:auto;
9}
10
11.key_visual .slider{
12  margin:0 10px;
13}

JavaScript
1$('.key_visual').slick({
2  autoplay: true, 
3  autoplaySpeed: 3000,
4  speed: 500, 
5  arrows: true,
6  prevArrow: '<i class="fa fa-angle-left slick-arrow slick-prev"></i>',
7  nextArrow: '<i class="fa fa-angle-right slick-arrow slick-next"></i>',
8});