slickを使用したコードの書き方（文字が最後の画像にだけ 表示されます）

前提

カルーセル使用のTOPページを作成するために、
slickを使用してコードを書いているのですが、
それぞれの画像４枚に対して、上に文字を表示させたいのですが
現状、文字がなぜか４枚目（最後の画像）に集中して表示されてしまいます。

実現したいこと

それぞれに文字を中央配置、白文字で
表示させるための方法があれば教えていただけたら助かります。

該当のソースコード

課題 .carousel { width: 60%; margin: 0 auto; }

.slick-slide { /*height: 30vw;*/ height: auto; } .slick-prev:before, .slick-next:before { color: #000; } .carousel { /*親div*/ position: relative; /*相対配置*/ } .carousel p { position: absolute; /*絶対配置*/ color: white; /*文字は白に*/ top: 0; left: 0; } .carousel img { width: 100%; } .anime1 p { color: #fff; font-size: 30px; font-weight: 700; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); } .anime2 p { color: #fff; font-size: 30px; font-weight: 700; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); } .anime3 p { color: #fff; font-size: 30px; font-weight: 700; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); } .anime4 p { color: #fff; font-size: 30px; font-weight: 700; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); } </style>

画像1のタイトル 画像2のタイトル 画像3のタイトル 画像4のタイトル

</div> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js" integrity="sha256-DHF4zGyjT7GOMPBwpeehwoey18z8uiz98G4PRu2lV0A=" crossorigin="anonymous"></script> <script type="text/javascript"> // カルーセルにするセレクタを指定する $('.carousel').slick({ // ここにslickのオプションを指定 dots: true, autoplay: true, autoplaySpeed: 5000, }); </script>

試したこと

上記コードが何回か試して、
白文字中央配置にまでしたものです

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

ツールとしては、cloud9のHTMLファイルに
styleも含めて書き込んでいます。