将标题添加到我的HTML滑块

如何添加标题或标题，以显示旋转木马上每张幻灯片特有的简短描述。这是我的密码：

<h1>Incredibly Basic Slider</h1>
<div id="slider">
  <a href="#" class="control_next">>></a>
  <a href="#" class="control_prev"><</a>
  <ul>
    <li>SLIDE 1</li>
    <li>SLIDE 2</li>
    <li>SLIDE3</li>
    <li>SLIDE4</li>
  </ul>  
</div>

基本滑块
您只需为每个
标记添加一个标题：

<li title="This is a caption">SLIDE 1</li>

幻灯片1

我添加字幕的想法是使用HTML和CSS：

ul{margin:0；padding:0；文本对齐：居中；}
li{位置：相对；宽度：150px；高度：150px；列表样式：无；显示：内联块；填充：10px；边框：1px实心#999；线宽：150px；边距底部：0.25em；}
标题{位置：绝对；底部：0；左侧：0；右侧：0；背景：rgba（0,0,0,0.25）；线条高度：3em；}

基本滑块


幻灯片1
标题1


幻灯片2
标题2


幻灯片3
标题3


幻灯片4
标题4

您可以在li元素中添加一个div标记，并在其中添加文本。“Caption”是什么意思？

li

元素附近的文本？要做到这一点，有无数种方法，你必须更加具体。标题是指用户可以看到的幻灯片底部每个幻灯片所特有的简短描述。我会使用“title”类作为标题和标题吗@zack.lore在我的示例中，幻灯片1文本将充当标题，当用户将鼠标悬停在

标记上时，他们将看到您使用

title=“caption you want to user see”

在每个

标记中提供的标题。非常感谢。您的示例非常有用。这段代码是否允许我让每张幻灯片的每个标题都是唯一的，或者每个标题都是相同的@维伦B。