JSFiddle - React, Tailwind, and code Playground

by Charles Ko

HTML

<div id="container">
  <ul>
    <li><a href="#">Link 1</a> | ABCD EFG</li>
    <li><a href="#">Link 2</a> | HIJK LMNO</li>
    <li><a href="#">Link 3</a> | PQRSTU VW</li>
    <li><a href="#">Link 4</a> | XYZA BC</li>
    <li><a href="#">Link 5</a> | DEFG HI</li>
  </ul>
</div>
<div id="ui">
  <div>
    <span id="left">Left</span>
    |
    <span id="right">Right</span>
  </div>
  <p>
  Use left and right to move.
  Issue: Use tab key (and shift+tab) to navigate to any of the links. The container of the links shift to show the focused link. Notice the content is decentered when it happens.
  </p>
</div>

CSS

body {
  overflow: hidden;
}

#container {
  width: 2600px;
  overflow: none;
  transition: transform 0.4s;
  transform: translate(0,0);
  overflow: hidden;
  margin: 0;
}

li {
  width: 500px;
  text-align: center;
  list-style-type: none;
  float:left;
  margin: 0;
  padding: 0;
}

a {
  color: black;
  font-size: 2.0rem;
}

#ui {
  position: fixed;
  top: 200px;
}

#ui span {
  cursor: pointer;
}

JavaScript

var container = $("#container")
var cur = 0;

function go(increment) {
  var next = cur + increment;
  if (next < 0) next = 4;
  else if (next > 4) next = 0;
  cur = next
  var newX = cur * 500;
	container.css({transform: 'translate(-' + newX + 'px, 0)'})
}

$("#left").click(function(e){ go(-1); });
$("#right").click(function(e){ go(1); });