V.S. V.S. - 5 months ago 8
CSS Question

Add captions to my HTML slider

How can I add a title or caption that displays a short description unique to each slide on my carousel. Here is my code:

<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

My idea of adding captions would be using HTML and 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>