Javascript Flexslider上的文本覆盖

我使用的是flexslider，我试图为每张幻灯片添加一个单独的文本覆盖，但运气不太好

<div class="flexslider">
    <ul class="slides">
        <li>
           <img src="http://placehold.it/350x150">
           <div class="RCSlideoverlay">CLICK HERE</div>

        </li>
        <li>
            <img src="http://placehold.it/350x150">
        </li>
        <li>
            <img src="http://placehold.it/350x150">
        </li>
    </ul>
</div>

<script type="text/javascript" charset="utf-8">
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    pauseOnHover: true,
    controlNav: true, 
    directionNav: false, 
    });
});
</script>

点击这里






$（窗口）。加载（函数（）{
$（'.flexslider'）.flexslider({
动画：“幻灯片”，
pauseOnHover:是的，
控制导航：是的，
方向导航：错误，
});
});

我是如何处理的，只需在图像下方添加一个带有类名的

标记，然后用CSS定位它们

HTML:

<li>
  <a href="#"><img src="http://placehold.it/660x440" width="100%" height="100%">
  <span class="flex-caption">Place Hold It Image</span></a>
</li>

---

我的flexslider底部有一个黑色渐变，因此我将文本设置为白色，以便您能够正确阅读。希望能有所帮助。

好吧，看来您可能需要一些

javascript

您能至少为我指出正确的方向吗？对前端开发相对较新，只是尝试学习。

/*Caption Text*/
.flex-caption {
    bottom:50px;
    color: white;
    font-size: 16px;
    line-height: 20px;
    left:0;
    padding:0 20px;
    position:absolute;
    right:0;
    text-transform: uppercase;
    z-index:1;
}