スリックスライダーそれぞれの画像に文字をのせたい

前提・実現したいこと

HTML CSS JAVASCRIPT を使って、ホームページの作成をしています。
スリックスライダーでimg.画像を4枚載せています。
各々の画像に文字を入れたいのですが、4枚目のみに文字が表示され、1枚目〜3枚目には文字が表示されず困っています。

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

エラーメッセージはありありません。

該当のソースコード

HTML
<!-- TOP-slider -->
<div id="top" class="main-visual">
    <ul class="slider">
        <li><img src="img/kamitec-plate.JPG"　alt="slick-img"><p class="slider_text">０００００００００００００！！</p></li>
        <li><img src="img/lathe-image.jpg"alt="slick-img"></p></li> class="slider_text">1111111111111111111111111111111111111111！！</p></li>
        <li><img src="img/sengeeji.JPG" alt="slick-img"><p class="slider_text">222222222222222222！！</p></li>
        <li><img src="img/sessaku.jpg" alt="slick-img"><p> class="slider_text">33333333333333333333333333333！！</p></li>            
    </ul>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="js/slick.min.js"></script>
    <script src="js/main.js"></script>
</div>
<!-- TOP-slider -->

CSS

/* slider */
* {
list-style: none;
}

.slider {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    height: 10%;
    position: relative;
}

.slider img {
    width: 100%;
    height: 34vw;
    object-fit: cover;
}
    
.slick-prev::before, 
.slick-next::before {    
}
.main-visual {
margin-top: 92px;

}
.slider_text {
position: absolute;
top: 50%;
font-size: 3em;
width: 100%;
}

ul {
text-align: center;
}

/* slider */