为我的HTML滑块添加标题

Question

如何添加标题或标题，以显示我的轮播上每张幻灯片的唯一简短描述。这是我的代码：

<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>

Answer 1

您只需为每个<li>代码添加标题：

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

Answer 2

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

ul {margin: 0; padding: 0; text-align: center;}
li {position: relative; width: 150px; height: 150px; list-style: none; display: inline-block; padding: 10px; border: 1px solid #999; line-height: 150px; margin-bottom: 0.25em;}
li .caption {position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.25); line-height: 3em;}

<h1>Incredibly Basic Slider</h1>
<div id="slider">
  <a href="#" class="control_next">&gt;</a>
  <a href="#" class="control_prev">&lt;</a>
  <ul>
    <li>
      SLIDE 1
      <div class="caption">Caption 1</div>
    </li>
    <li>
      SLIDE 2
      <div class="caption">Caption 2</div>
    </li>
    <li>
      SLIDE 3
      <div class="caption">Caption 3</div>
    </li>
    <li>
      SLIDE 4
      <div class="caption">Caption 4</div>
    </li>
  </ul>  
</div>