JSFiddle - React, Tailwind, and code Playground

by thirdender

HTML

<p>1 selected</p>
<ul class="pager">
  <li class="selected">
    <a href="#">1</a>
  </li>
  <li>
    <a href="#">2</a>
  </li>
  <li>
    <a href="#">3</a>
  </li>
</ul>

SCSS

body {
  margin: 1em;
  font: 12px Arial, sans-serif;
}
p {
  margin: .8em 0;
}
.pager {
  &, li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
  }
  li.selected a {
    background: #ddd;
  }
  a {
    color: #333;
    text-decoration: none;
    display: inline-block;
    padding: .2em .4em;
    border-radius: 2px;
    &:hover {
      background: #ccc;
    }
  }
}

JavaScript

// This is the handler… assuming this isn't our code
var output = $("p");
$(".pager a").click(function() {
  var el = $(this);
  output.text(el.text() + " selected");
  el.parent().parent().contents().removeClass("selected");
  el.parent().addClass("selected");
  return false;
});

// This is our timer
var delay = 1000,
    timer, pager;
pager = $(".pager").hover(function() {
  clearInterval(timer);
}, function() {
  timer = setInterval(function() {
    var selected = pager.find(".selected"),
        next = selected.next();
    if (next.length === 0) {
      next = pager.children().first();
    }
    next.find("a").click()
  }, delay);
});
pager.triggerHandler("mouseleave")