JSFiddle - React, Tailwind, and code Playground

by jblasco

HTML

<div class="right">
<ul>
  <li>
    <span class="meta"><a class="js-prev meta_left prel" style="left: 25px; z-index: 2;" target="ss-vmvmr"></a>
    <span class="meta prel" style="bottom: 3px; left: 12px; z-index: 1;overflow: hidden;">
      <span id="current-slide">9</span><em>&nbsp;of</em>
      <span id="total-slides">10</span>
    </span>
    <span class="meta"><a class="js-next meta_right prel" style="z-index: 2;" target="ss-vmvmr"></a>
  </span></span></li>
</ul>
</div>

CSS

.meta {
font-size: 11px;
line-height: 20px;
}

.meta_left {
background-image: url('http://dl.dropbox.com/u/47799068/arrows_small.png');
background-position: 10px 0;
display: inline-block;
height: 13px;
padding-right: 10px;
width: 25px;
}

.prel {
position: relative;
}

span.meta.prel {
    display: inline-block;
    width: 45px;
    text-align: center;
}

.meta_right {
background-image: url('http://dl.dropbox.com/u/47799068/arrows_small.png');
background-position: -17px -34px;
display: inline-block;
height: 13px;
width: 25px;
}

JavaScript

$('a.js-prev').click(function() {
    $('#current-slide').html('10');
});