WordPressでjQueryの「slick」を使用してスライダーを作りたいです。

実現したいこと

ここに実現したいことを箇条書きで書いてください。
WordPressでjQueryの「slick」を使用してスライダーを作りたいです。

前提

ここに質問の内容を詳しく書いてください。

「Visual Studio Code」でコードを書き上げて問題なく動作しましたが、WordPressで起動した際に写真下の点が二重に表示されているのと、写真横の矢印がCSSでの変更が反映されていませんでした。

こちらを下写真のようにしたいです。

発生している問題・エラーメッセージ

上記の内容以外はスライダーは正常に動いているためWordPressで使用しているテーマ「LION MEDIA」のコードの中で何か動かない原因があるのかな？と考えていますがわからずに困っています。
申し訳ありませんがどなたかご経験がある方、教えていただけますと助かります。

該当のソースコード

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--SlickのCDNを読み込む-->
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
    
</head>
<body> 
    <div class="room">
        <div class="slider">
            <div>
               <img src="https://local-sneakers.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-09-2.50.46.png"  alt="画像1" >
           </div>
           <div>
               <img src="https://local-sneakers.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-09-1.13.24.png" alt="画像2">
           </div>
           <div>
               <img src="https://local-sneakers.com/wp-content/uploads/2023/02/スクリーンショット-2023-02-01-0.48.39.png" alt="画像3">
           </div>       
       </div>
       
       <div class="word">
            <h2>
               【テスト】
            </h2>
            <p>
                ここに文章が入ります。
            </p>
        </div>
        
    </div>
                    
    <!--SlickのCDNを読み込む-->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

</body>
</html>

CSS

@media (min-width:600px){
    .room{
        display: flex;
        flex-direction: row;
    }
        
    }
    .slider{
        flex: 1;
        margin-right: 1.0%;
        margin-left: 2.0%;
        width:50%;           
    }
    .word{
        flex: 1;
        margin-right: 2.0%;
        margin-left: 1.0%;
        width:50%;
    }
}

.slider {
    visibility: hidden;
}
.slider.slick-initialized{  
    visibility: visible;
}
.slider-next{
    right: 10px;
}

.slider img {
    width: 80%;
    height: auto;
    margin: 0 auto;
 }

.slick-next{ right:0!important; }
.slick-prev{ left:0!important; }
.slick-arrow{ z-index:2!important; }


.slick-prev,.slick-next{
    width: 40px;
    height: 40px;
}
 
.slick-prev:before, .slick-next:before {
    font-size: 40px;
    color: #00000035;
    opacity: 1;
}

.slick-track { 
    display: flex;
    align-items: center;
}

}

$(function(){
  $(".slider").slick({
  
  dots: true,
  infinite: true,
  speed: 800,
  arrows: true,
  draggable: true,

  });

});

試したこと

WordPressでのSlick導入でよく起こる問題を検索した結果、JQueryが既にWordPress内で読み取られてしまっているということがあると出てきたのでそれを取り消すコードを書きましたが変化がありませんでした。

function custom_print_scripts() {
	if (!is_admin()) {
		//デフォルトjquery削除
		wp_deregister_script('jquery');

		//GoogleCDNから読み込む
		wp_enqueue_script('jquery-js', '//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js' );
	}
}

add_action('wp_print_scripts', 'custom_print_scripts');

また、動かなかった場所がどこかを1ヶ所づつ検証していった結果下記コードが動いておりませんでした。

CSS

.slick-prev,.slick-next{
    width: 40px;
    height: 40px;
}
 
.slick-prev:before, .slick-next:before {
    font-size: 40px;
    color: #00000035;
    opacity: 1;
}

.slick-track { 
    display: flex;
    align-items: center;
}

）