slickのスライダーのドットが二つ出てきてカスタマイズの方法が分かりません

ドットのカスタマイズの方法が分かりません

何度スライダーを作ってドットを表示させても、デフォルトで小さな〇と数字の書かれたボタンが出てきます。デフォルト表示でこれって普通ですか？

やりたいことは、数字の書かれたbuttonは消して、小さな〇の方にactiveがついて、activeがつくと丸の色が変わるようにしたいのですが、どうすればいいですか？
ドットをfalseにすると小さな〇も数字の書かれたactiveの移動するbuttonも消えます
どうかお願いします

※flexを使うとlickが正常に動作しない可能性があるとのことで、flexは全て解除しました

index.html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>slick</title>
8    <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
9    <link rel="stylesheet" href="public/stylesheets/style.css">
10    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
11    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
12    <script src="/index.js"></script>
13</head>
14<body>
15    <main>
16     <div class="mainvg">
17      <div class="maincont">
18       <div class="text_side">
19        <p class="vgtext">aaaa</p>
20        <p class="vgtext2">iiii</p>
21       </div> 
22      <ul class="slick_list">
23      
24       <li><img src="/public/images/todo.png" alt="1"></li>
25       <li><img src="/public/images/usagi.png" alt="2"></li>
26       <li><img src="/public/images/todo.png" alt="3"></li>
27      </ul>
28      
29    </div>
30    <div class="p-pc-main-visual__control">
31    <div class="p-pc-main-visual__control-item"><button type="button" class="p-pc-main-visual__play">再生</button></div>
32    <div class="p-pc-main-visual__control-item"><button type="button" class="p-pc-main-visual__pause ">停止</button></div>
33  </div>
34  <!-- <div class="buttons">
35    <div class="button js-stop">停止</div>
36    <div class="button js-play">開始</div>
37  </div> -->
38      </div>
39     </div>
40     <div class="ttl">
41     <p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><h2>ウサギたち</h2><p>........</p>
42     </div>
43     <div class="ps"><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p class="pl"></p></div>
44     <div>
45        <ul class="slick_list2">
46      
47            <li><img src="/public/images/todo.png" alt="1"></li>
48            <li><img src="/public/images/usagi.png" alt="2"></li>
49            <li><img src="/public/images/todo.png" alt="3"></li>
50           </ul>
51     </div>
52     <div class="block">
53     <div class="texts"><p>oooo</p><p>eeee</p></div>
54     <ul class="slider">
55        <li><img src="/public/images/todo.png" alt="1"></li>
56       <li><img src="/public/images/usagi.png" alt="2"></li>
57       <li><img src="/public/images/todo.png" alt="3"></li>
58      </ul>
59      
60    </div>
61    <div class="buttons">
62        <div class="button js-stop">停止</div>
63        <div class="button js-play">開始</div>
64      </div>
65    
66    </div>
67      </main>
68    </main>
69    
70</body>
71</html>

style.css
1*{
2
3    min-width: 0;
4    
5    min-height: 0;
6    
7    }
8.text_side{
9    /* display:flex; */
10    width: 35%;
11}
12.mainvg{
13    height:550px;
14    background-image:url("/public/images/quiz.png");
15/* }
16/* .maincont{
17    /* display: flex; */
18} */ */
19.vgtext{
20    writing-mode: vertical-rl;
21}
22.vgtext2{
23    writing-mode: vertical-rl;
24}
25.slick_list{
26    width:65%;
27}
28.slick-next{ right:0!important;
29    position: absolute;
30    top: 10rem;
31    right: 0;
32    background-color: pink;
33    padding: 1rem;
34 }
35.slick-prev{ left:0!important; 
36    position: absolute;
37    top: 16rem;
38    right: -2rem;
39    background-color: pink;
40    padding: 1rem;
41}
42.slick-arrow{ z-index:2!important; }
43.slick-arrow:before{
44        content:""!important;
45    }    
46
47/* .slide-dots{
48    display: flex;
49    
50} */
51.slick-dots li {
52    color:blue;
53  } 
54
55.slick-active{
56    background-color:green;
57}
58/* .playbuttons{
59    display:flex;
60} */ */
61/* .ttl{
62    display: flex;
63    justify-content: center;
64} */
65/* .p-pc-main-visual__control{
66    display:flex;
67} */
68.p-pc-main-visual__play.is-select, .is-select.p-pickup__play, .p-pc-main-visual__pause.is-select, .is-select.p-pickup__pause {
69    color: #ffffff;
70    font-weight: bold;
71    background-color: #848484;
72  }
73
74p{
75    transform: scale(1.2, 4);
76    font-weight: 900;
77    border-radius: 1px;
78    font-size: 1.2rem;
79}
80h2{
81    margin-left: 0.5rem;
82    margin-right: 0.5rem;
83}
84.ps{
85    /* display:flex;
86    justify-content: center; */
87    align-items: center;
88    /* align-self: self-start; */
89    height: 100%;
90
91}
92.pl{
93    background-color: blue;
94    content: "";
95    height: 0.3rem;
96    padding-left: 0.1rem;
97    padding-right: 0.1rem;
98    align-self: self-end;
99}
100/* .buttons{
101    display:flex;
102}
103.block{
104    display:flex;
105}
106.texts{
107    display:flex;
108} */

index.js
1$(function(){
2  $('.slick_list').slick({
3     dots:true,
4     dotsClass: 'slide-dots',
5     infinite:true,
6     slidesToShow:1,
7     slidesToScroll:1,
8     centerMode:true,
9     variableWidth:true,
10     speed:500,
11     autoplay:true,
12     accessibility:false,
13     arrows: true,
14     prevArrow: '<button class="slide-arrow prev-arrow"></button>',
15    nextArrow: '<button class="slide-arrow next-arrow"></button>'
16  });
17  $('.p-pc-main-visual__play').on('click', function(){
18		$('.p-pc-main-visual__list').slick('slickPlay');
19		$(this).addClass('is-select');
20		$('.p-pc-main-visual__pause').removeClass('is-select');
21	});
22  $('.js-stop').on('click', function() {
23    $('.slick_list').slick('slickPause');
24  });
25  
26  $('.js-play').on('click', function() {
27    $('.slick_list').slick('slickPlay');
28  });
29	$('.p-pc-main-visual__pause').on('click', function(){
30		$('.p-pc-main-visual__list').slick('slickPause');
31		$(this).addClass('is-select');
32		$('.p-pc-main-visual__play').removeClass('is-select');
33	
34
35  $('.slick_list2').slick({
36    dots:true,
37     dotsClass: 'slide-dots',
38     infinite:true,
39     slidesToShow:1,
40     slidesToScroll:1,
41     centerMode:true,
42     variableWidth:true,
43     speed:1000,
44     autoplay:true,
45     accessibility:false,
46     arrows: true,
47 });
48 $('.js-stop').on('click', function() {
49  $('.slider').slick('slickPause');
50});
51
52$('.js-play').on('click', function() {
53  $('.slider').slick('slickPlay');
54});
55});
56
57$(document).ready(function(){
58  $('.slider').slick({
59    autoplay: true,
60    autoplaySpeed: 500,
61
62    dots:true,
63     dotsClass: 'slide-dots',
64     infinite:true,
65     slidesToShow:1,
66     slidesToScroll:1,
67     centerMode:true,
68     variableWidth:true,
69     speed:1000,
70     autoplay:true,
71     accessibility:false,
72     arrows: true,
73  });
74  $('.js-stop').on('click', function() {
75    $('.slider').slick('slickPause');
76  });
77  
78  $('.js-play').on('click', function() {
79    $('.slider').slick('slickPlay');
80  });
81});
82});
83