JSFiddle - React, Tailwind, and code Playground

CSS Variables based slider. Simpler version.

by Travis Almand

HTML

<div id="slider">
  <div id="slides">
    <div class="slide" style='background-color: red;'>1</div>
    <div class="slide" style='background-color: white;'>2</div>
    <div class="slide" style='background-color: blue;'>3</div>
    <div class="slide" style='background-color: green;'>4</div>  
    <div class="slide" style='background-color: yellow;'>5</div>
  </div>
  
  <div id="left" class="control"></div>
  <div id="right" class="control"></div>
</div>

<br />
<input id="slide_num" type="number" />
<button id="pick_slide_num">choose</button>

CSS

:root {
  --slide: 1;
  --slideWidth: 200px;
  --slideHeight: calc(var(--slideWidth) * .5625);
  --left: 0;
}

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

html,
body {
  margin: 0;
  padding: 0;
}

#slider {
  background-color: #000;
  height: var(--slideHeight);
  line-height: var(--slideHeight);
  margin: 20px auto;
  overflow: hidden;
  position: relative;
  width: var(--slideWidth);
}
#slides {
  font-size: 0;
  height: 100%;
  transform: translate3d(calc((var(--slide) - 1) * var(--slideWidth) * -1), 0, 0);
  transition: all 0.25s;
  white-space: nowrap;
}
#slides:hover ~ .control {
  opacity: 0.25;
}

.control {
  background-color: #fff;
  cursor: pointer;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: all 0.15s;
  width: 5%;
}
.control:hover {
  opacity: 0.5;
}
#right {
  left: auto;
  right: 0;
}
.slide {
  box-shadow: inset 0 0 10px black;
  display: inline-block;
  font-size: 60px;
  height: 100%;
  text-align: center;
  transition: all 0.5s;
  width: var(--slideWidth);
}

JavaScript

var $slides = document.querySelector('#slides');
var $slide = Array.from(document.querySelectorAll('.slide'));
var $slideNum = document.querySelector('#slide_num');
var $pickSlideNum = document.querySelector('#pick_slide_num');
var $left = document.querySelector('#left');
var $right = document.querySelector('#right');
var slide = window.getComputedStyle(document.body).getPropertyValue('--slide');

$left.addEventListener('click', function () {
	slide--;
  document.documentElement.style.setProperty('--slide', slide);
});

$right.addEventListener('click', function () {
	slide++;
  document.documentElement.style.setProperty('--slide', slide);
});

$pickSlideNum.addEventListener('click', function () {
	slide = $slideNum.value;
  document.documentElement.style.setProperty('--slide', slide);
});