Show date list with moving arrows?

Question

I would like to know how to make a kind of slide with dates, with arrows on the sides if it exceeds a specific width. This is what I have. What I need is a kind of pagination system, but it doesn’t change any information on the site, just something visual.

<div style="padding:20px;padding-top:0;width:100%;background:#333;color:white;text-align:center;">
    <ul style="display:inline;list-style:none;" id="ull">
        <li style="text-align:left;"><h2 style="padding:0;">Galeria de Fotos</h2></li>
        <li style="display: inline;"><a>2000</a></li>
        <li style="display: inline;"><a>2011</a></li>
        <li style="display: inline;"><a>2012</a></li>
        <li style="display: inline;"><a>2000</a></li>
        <li style="display: inline;"><a>2011</a></li>
        <li style="display: inline;"><a>2012</a></li>
        <li style="display: inline;"><a>2000</a></li>
        <li style="display: inline;"><a>2011</a></li>
        <li style="display: inline;"><a>2012</a></li>
        <li style="display: inline;"><a>2000</a></li>
        <li style="display: inline;"><a>2011</a></li>
        <li style="display: inline;"><a>2012</a></li>
    </ul>
</div>

Answer 1

Have you tried using Bootstrap for that?

Example in w3schools