①slick（スライダー）での再生・停止ボタンが効きません

*①slick（スライダー）での再生・停止ボタンが効きません
② slidesToShow:1,　にしているのにも関わらず、スライド画面が並列で表示される
③<div class="ps">.......</div>のflexアイテムが、親要素のpsに
.ps{
display:flex;
justify-content: center;
align-items: center;
/ align-self: self-start; */
height: 100%;
｝としているにも関わらず縦中央にならない
**

ため困っています。特に、再生・停止ボタンが動かなくて困っています
助けてください

イメージ説明

index.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>slick</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="public/stylesheets/style.css">
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <script src="/index.js"></script>
</head>
<body>
    <main>
     <div class="mainvg">
      <div class="maincont">
       <div class="text_side">
        <p class="vgtext">aaaa</p>
        <p class="vgtext2">iiii</p>
       </div> 
      <ul class="slick_list">
      
       <li><img src="/public/images/todo.png" alt="1"></li>
       <li><img src="/public/images/usagi.png" alt="2"></li>
       <li><img src="/public/images/todo.png" alt="3"></li>
      </ul>
      
    </div>
    <div class="p-pc-main-visual__control">
    <div class="p-pc-main-visual__control-item"><button type="button" class="p-pc-main-visual__play">再生</button></div>
    <div class="p-pc-main-visual__control-item"><button type="button" class="p-pc-main-visual__pause is-select">停止</button></div>
  </div>
    
      </div>
     </div>
     <div class="ttl">
     <p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><h2>ウサギたち</h2><p>........</p>
     </div>
     <div class="ps"><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p class="pl"></p></div>
    </main>
    
</body>
</html>

style.css
.text_side{
    display:flex;
    width: 35%;
}
.mainvg{
    height:550px;
    background-image:url("/public/images/quiz.png");
}
.maincont{
    display: flex;
}
.vgtext{
    writing-mode: vertical-rl;
}
.vgtext2{
    writing-mode: vertical-rl;
}
.slick_list{
    width:65%;
}
.slick-next{ right:0!important;
    position: absolute;
    top: 10rem;
    right: 0;
    background-color: pink;
    padding: 1rem;
 }
.slick-prev{ left:0!important; 
    position: absolute;
    top: 16rem;
    right: -2rem;
    background-color: pink;
    padding: 1rem;
}
.slick-arrow{ z-index:2!important; }
.slick-arrow:before{
        content:""!important;
    }    

.slide-dots{
    display: flex;
    
}
.slick-active{
    background-color:green;
}
.playbuttons{
    display:flex;
}
.ttl{
    display: flex;
    justify-content: center;
}
.p-pc-main-visual__control{
    display:flex;
}
.p-pc-main-visual__play.is-select, .is-select.p-pickup__play, .p-pc-main-visual__pause.is-select, .is-select.p-pickup__pause {
    color: #ffffff;
    font-weight: bold;
    background-color: #848484;
  }

p{
    transform: scale(1.2, 4);
    font-weight: 900;
    border-radius: 1px;
    font-size: 1.2rem;
}
h2{
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}
.ps{
    display:flex;
    justify-content: center;
    align-items: center;
    /* align-self: self-start; */
    height: 100%;

}
.pl{
    background-color: blue;
    content: "";
    height: 0.3rem;
    padding-left: 0.1rem;
    padding-right: 0.1rem;
    align-self: self-end;
}

index.js
$(function(){
  $('.slick_list').slick({
     dots:true,
     dotsClass: 'slide-dots',
     infinite:true,
     slidesToShow:1,
     slidesToScroll:1,
     centerMode:true,
     variableWidth:true,
     speed:1000,
     autoplay:true,
     accessibility:false,
     arrows: true,
     prevArrow: '<button class="slide-arrow prev-arrow"></button>',
    nextArrow: '<button class="slide-arrow next-arrow"></button>'
  });
  $('.p-pc-main-visual__play').on('click', function(){
		$('.p-pc-main-visual__list').slick('slickPlay');
		$(this).addClass('is-select');
		$('.p-pc-main-visual__pause').removeClass('is-select');
	});

	$('.p-pc-main-visual__pause').on('click', function(){
		$('.p-pc-main-visual__list').slick('slickPause');
		$(this).addClass('is-select');
		$('.p-pc-main-visual__play').removeClass('is-select');
	});

  
});