javascript - 将图像的标题从滑块中取出

Question

我面临着一件大事，我想将图像的标题放在滑块之外。我有主滑块，滑块显示我的项目的图像。我想要的是将每个项目的名称放在滑块下（滑块外面不在里面），并且名称应该与图像相对更改。我试图修复它，但它没有用。这是我的代码脚本：这是 html：

<div class="master-slider ms-skin-contrast" id="masterslider" >
        {% for project in projects %}
            <div class="ms-slide">
                <img src="{{asset('uploads/images/')}}{{project.images[0].name}}" data-src="{{asset('uploads/images/')}}{{project.images[0].name}}" alt="{{project.name}}"/>
                <div class="ms-layer ms-caption" id="image-caption">
                     {{project.name}}
                </div>

            </div>
        {% endfor %}
    </div>

这是CSS

#image-caption{
    position: fixed; /* Stay in place */
    z-index: 9999; /* Stay on top */
    top: 250px;
    right: 800px;
    color: red;
}

Answer 1

好的。现在我知道它是如何工作的了。使用完整的 CSS 会容易得多，但您可以尝试这样的事情来看看会发生什么：

#image-caption {
    position: absolute;
    bottom: -50px;
}