JSFiddle - React, Tailwind, and code Playground

by Artem

HTML

<div id="gallery">
  <!-- mask -->

  <ul>
    <!-- container -->
    <li><img src="https://dummyimage.com/96x96/f0f0f0/626262.png&text=1"></li>
    <li><img src="https://dummyimage.com/96x96/f0f0f0/626262.png&text=2"></li>
    <li><img src="https://dummyimage.com/96x96/f0f0f0/626262.png&text=3"></li>
    <li><img src="https://dummyimage.com/96x96/f0f0f0/626262.png&text=4"></li>
  </ul>

</div>

<button type="button" id="prev">&laquo;</button>
<button type="button" id="next">&raquo;</button>

CSS

#gallery {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px green dotted;
  margin: 30px 0 0 150px;
  /* usually an «overflow:hidden» is set here */
}

#overflow:checked + #gallery {
  overflow: hidden;
}

#gallery ul {
  font-size: 0;
  white-space: nowrap;
  position: absolute;
  top: 0;
  left: -100px;
  margin: 0;
  padding: 0;
}

#gallery li {
  display: inline-block;
  vertical-align: top;
  width: 96px;
  height: 96px;
  white-space: normal;
  padding: 2px
}

button {
  font: 40px "Courier New";
  border: 1px #d8d8d8 dotted;
  color: #626262;
  background: none;
  cursor: pointer;
  width: 50px;
  text-align: center;
  margin: 20px -150px 0 150px;
}

label,
a {
  font: 14px Georgia;
  font-style: italic;
  color: #626262;
}

JavaScript

'use strict';

const gallery = document.getElementById('gallery');
const list = gallery.getElementsByTagName('ul')[0];
const elements = gallery.getElementsByTagName('li');
const length = elements.length;
let current = 1;

let first = list.firstElementChild;
let last = list.lastElementChild;

const triggers = document.getElementsByTagName('button');

list.append(first.cloneNode(true));
list.prepend(last.cloneNode(true));

[].forEach.call(triggers, function(trigger) {
  trigger.addEventListener('click', function(e) {
    let delta = (event.target.id === "prev") ? -1 : 1;
    
    let left = Number.parseInt(list.style.left) ? Number.parseInt(list.style.left) : -100;
    
    left += -100 * delta;
    list.style.left = left + 'px'; // animated
    
    current += delta;
    
   	if (current === 0) {
    	current = length;
      left = -100 * current;
    }
    if (current === length + 1) {
    	current = 1;
      left = -100 * current;
    }
    list.style.left = left + 'px'; // not animated
    console.log(current);
    console.log(left);
  });
});

function isNumeric(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}