轮播文本更改与图像相关

Question

我设置了一个图片滑块，我希望能够在滑块下方显示文字，以及当用户点击＆＃34; next＆＃34;当用户点击＆＃34;之前的＆＃34;时，下面的文字会发生变化，以便与上面的图像相关。文本向后滑动，使其与上图相关。

＆＃13;

＆＃13;

  var text = ['1', '2', '3', '4',]

  $(document).ready(function () {
    $(".slick-next").click(function () {
      $(".page-number p").append(text)
    } )
 
  } );

＆＃13;

.page-number p {
  position: absolute;
  left: 18%;
  bottom: 0%;
  font-size: 2em;
  margin: 2%;
  text-align: center;
  width: 60vw;
}

＆＃13;

 <div class="overlay-content_2">
        <div class="slick-content">
             <img src="inside.jpg">
          <img src="single.jpg">
          <img src="inside.jpg">
        </div>
      </div>
      <div class="page-number"><p>Structural Collapse</p></div>

＆＃13;

＆＃13;

＆＃13;