slickのdotsをスライダーの画像の右下に埋め込む方法と、aタグをhover、active状態にしたとき画像を表示させたい。

1、slickのdots（丸い点）をスライダーの右下に表示させる方法。

試したことは、slick-dotsを一つのブロック要素と考えて、スライダーの画像にpositon relativeをかけて、slick-dotsにposition absoluteをかけて位置を調整しようと試みましたがダメでした。
その他、ネットの記事などにあったものをコピペ→自分のコード内でパラメーターをいじくってみましたがどれも反応なしでした。

2 HTML　nav-list nav-list-item aをhoverしたときに星マーク(小さな画像)を表示、クリックした時に星マークがついた状態を維持させる方法。

試したことは、content"url()"を使って表示させたい画像のソースを打ち込んでみましたが反応なしでした。
あとは、list-style-type　noneになっていたのでそれを解除したうえで、上の書き方をしたりしてみましたがやはりだめした。

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

エラーメッセージ

該当のソースコード

HTMl
1        <div class="nav">
2            <ul class="nav-list">
3                <li class="nav-list-item"><a href="#">個人グループ利用</a></li>
4                <p class="nav-list-item">/</p>
5                <li class="nav-list-item"><a href="#">団体利用</a></li>
6                <p class="nav-list-item">/</p>
7                <li class="nav-list-item"><a href="#">客室</a></li>
8                <p class="nav-list-item">/</p>
9                <li class="nav-list-item"><a href="#">食事</a></li>
10                <p class="nav-list-item">/</p>
11                <li class="nav-list-item"><a href="#">施設の紹介</a></li>
12                <p class="nav-list-item">/</p>
13                <li class="nav-list-item"><a href="#">予約</a></li>
14            </ul>
15        </div>
16   
17    <div class="main">
18        <div class="main-slider">
19            <ul class="main-slider-list" id="main-slider">
20                <li class="main-slider-item"><img src="image/campfire.png" alt="キャンプファイヤー">
21                </li>
22                <li class="main-slider-item top-pic"><img src="image/bbq.png" alt="焼き肉"></li>
23                <li class="main-slider-item top-pic"><video class="slick-video" src="image/video.mp4" type="video/mp4"
24                        autoplay muted></video></li>
25                <li class="main-slider-item top-pic"><img src="image/enjoy.png" alt=""></li>
26            </ul>
27        </div>
28
29-------------------------------↓をスライダーの右下に固定表示させたい--------------------------------
30        <ul class="slick-dots">
31            <li class="slick-active">
32                <buttuon type="button"></buttuon>
33            </li>
34            <li>
35                <buttun type="button"></buttun>
36            </li>
37            <li>
38                <buttun type="button"></buttun>
39            </li>
40            <li>
41                <buttun type="button"></buttun>
42            </li>
43        </ul>
44
45-----------------------------------------css---------------------------------------------
46
47
48.nav-list:hover{
49    list-style-image: url(image/list.png);
50}
51
52.main{
53    position: relative;
54    height: 100%;
55}
56.main-slider{
57    height: 694px;
58    overflow: hidden;
59}
60.main-slider-list{
61    padding: 0px;
62}
63.top-pic{
64    width: 100%;
65    height: 50vw;
66    object-fit: cover;
67}
68
69-------------------------------↓はdotsのcssです。------------------------------------
70
71.slide-dots {
72    cursor: pointer;
73    margin: 0;
74    padding: 0;
75    text-align: center;
76  }
77  .slide-dots li {
78    display: inline-block;
79    margin: 0 10px;
80  }
81  .slide-dots li button {
82    position: relative;
83    text-indent: -9999px;
84  }
85  .slide-dots li button::before {
86    content: "●";
87    color: #001976;
88    cursor: pointer;
89    height: 13.5px;
90    left: 0;
91    margin: auto;
92    position: absolute;
93    right: 0;
94    top: 24px;
95    width: 13.5px;
96  }
97  .slide-dots li.slick-active button::before {
98    content: "●";
99    color: #AAA300;
100  }
101  button {
102    background: none;
103    border: none;
104    outline: none;
105    padding: 0 7px;
106  }
107  .slick-dots li{
108    width: 12px!important;
109    height:12px!important;
110    margin: -200px 9px!important;
111}
112
113.slick-dots li button{	
114    height: 100%!important;
115	width: 100%!important;
116}
117.slick-dots li button:before{
118	content:""!important;
119}
120---------------------------------------slickのJS----------------------------------------
121$('.main-slider').on('init', function (event, slick, currentSlide, nextSlide) {
122    slideItem = $(".slick-slide")
123    for (let i = 0; i < slick.slideCount; i++) {
124        let slideImg = slideItem.filter(function () { return ($(this).data('slick-index') === i) }).find("img").clone()
125        let dot = $(".slick-dots").find("li").eq(i).find("button")
126        let src = slideImg.attr('src')
127        dot.css("background", `url(image/dotsblue.png)`)
128        dot.css("background-size", "contain")
129    }
130});
131$(function () {
132    $("#main-slider").slick({
133        dots: true,
134        dotsClass: 'slick-dots',
135        responsive: [{
136            breakpoint: 800,  
137        }]
138    });
139});
140
141
142

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2021/07/05 09:56

＞【大至急】助けてください| タイトルに書くことで避けられやすくなるワード上位です。 https://teratail.com/help/question-tips#questionTips3-1 私も質問内容読んでません。「急ぎ」と書く人に限って何時間も何日も解決しなくても大丈夫なケースが多いです。見た人は「そんなに急ぎなら赤の他人で誰がいつみるとも分からないところに投稿するんじゃなくて業者に依頼したら？」と感じます。

Lhankor_Mhy

2021/07/05 10:05

グローバルナビとはどれですか？

kyota0606

2021/07/05 10:07

<ul class="slick-dots"> <li class="slick-active"> <buttun type="buttun"></buttun> </li> <li> <buttun type="button"></buttun> </li> <li> <buttun type="button"></buttun> </li> <li> <buttun type="button"></buttun> </li> </ul> この部分です。

kyota0606

2021/07/05 10:08

ドットの部分をスライダーの上に乗せたいです。